LoginSignup
1
1

More than 3 years have passed since last update.

【Nuxt.js】Vue CLIによりアプリケーション雛形を作るまで

Last updated at Posted at 2020-11-28

スクリーンショット 2020-11-28 10.00.51.png

言語化するために記事に起こしました。
汎用性の高いスターターテンプレートで雛形を作成するまでを簡潔に記します。

事前準備

①Node.jsの導入
②Yarnの導入
③direnvの導入

①、②共にNuxt.jsで開発する上で必須となるので導入する(ここではこれらの導入方法については省略します)。

③はターミナルのcurrentディレクトリで環境変数を自動で設定してくれるツール。環境変数の設定忘れを防止するため導入するとよい。

1

ターミナル
npm i -g @vue/cli @vue/cli-init

上記コマンドで、Vueコマンドを追加する。「Vue -V」でバージョン確認。

ターミナル
$ vue -V
  @vue/cli 4.5.9

2

1により、「vue init」コマンドでプロジェクト作成可能。
今回は初学者やカスタマイズして利用したい方におすすめのテンプレートである、「my-first-nuxt-app」を利用する。

desktop
$ vue init nuxt-community/starter-template my-first-nuxt-app

インストール中のいくつかの質問は全てEnterでOK。
作成後、

ターミナル
$ cd my-first-nuxt-app #ディレクトリに移動
$ yarn #パッケージをインストール
$ yarn dev # 開発モードでプロジェクトを起動

OPEN http://localhost:3000
と表示後、上記URLにアクセスする。

3

スクリーンショット 2020-11-28 10.00.51.png

このような表示が出れば完了です!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1