【Vue.js】Vue CLIでVue.jsを動かす〜プロジェクト作成まで

Vue.jsとは

• JavaScriptのフレームワーク。
• どのような規模・段階のアプリケーションにも対応することができる（プログレッシブフレームワーク）
• ページの一部で部分的に使用することもできるし、大規模なSPA（シングルページアプリケーション）を構築することもできる。

プログレッシブフレームワークとは、Vue.jsの生みの親であるEvan You氏の提唱する概念です。

参考記事

Vue.jsについて学習してみた ＜基礎編＞
Vue.js概要？

Vue CLIとは

• 迅速なVue.js開発を支援するためのコマンドラインインターフェイス。
• Vue.jsを利用した開発には、様々なパッケージやツールについての知識・複雑な設定が必要になる。それを自動化し、開発環境の構築を補助してくれる。
• 個別に公開されているパッケージ（ビルドツール、コンパイラなど） の集合体でもある。Vue CLIを利用することにより、そこから必要な機能だけを使うことができる。

参考記事

公式サイト（英語）

インストール

あらかじめディレクトリを作成し、初期化しておきます。（今回初期化の必要はないかもしれませんが、念の為。）

$ mkdir vue_cli_test
$ cd vue_cli_test
$ npm init

npmによるインストール

グローバルインストールで行っています。

$ npm install -g @vue/cli

加えて、@vue/cli-initもインストールします。

$ npm install -g @vue/cli-init

@vue/cli-initのインストールがされていない場合、プロジェクト作成のコマンドnpm init実行時に以下のエラーが発生します。

Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.

グローバルインストールの場合、パッケージはnpm list -gで確認できるディレクトリ配下のnode_modulesディレクトリにインストールされます。

$ npm list -g
/Users/yuki/.nodebrew/node/v12.7.0/lib

パッケージ名を指定して確認することもできます。

$ npm list -g @vue/cli
/Users/yuki/.nodebrew/node/v12.7.0/lib
└── @vue/cli@3.10.0 

環境変数の設定

このままだとvueコマンドが使えないため、.bash_profileにパスを設定します。
まず、コマンドがどこに存在するのか確認します。

$ npm bin -g
/Users/yuki/.nodebrew/node/v12.7.0/bin

.bash_profileに追記します。

$ vi ~/.bash_profile

export PATH="$HOME/.nodebrew/node/v12.7.0/bin:$PATH"

反映させます。

$ source ~/.bash_profile

Vue.jsのバージョン確認

vueコマンドが通るようになったので、Vue.jsのバージョンを表示してみます。
確認ができれば、Vue CLIのインストールは成功です。

$ vue -V
3.10.0

プロジェクト作成

npm init テンプレート名 プロジェクト名でプロジェクトを作成します。

今回、テンプレートはwebpackを指定します。

テンプレートの種類については、こちらの記事が参考になります。
Vue-cli(webpack)解剖 ーディレクトリ構成ー

$ vue init webpack my-app

いくつか質問をされます。
今は余分な機能を入れたくなかったので、以下の質問はNoにしました。

// SPA構築に必要なVue.js公式ルータ
? Install vue-router? No
// 構文チェックツール
? Use ESLint to lint your code? No
// テストツール
? Set up unit tests No
// テストツール
? Setup e2e tests with Nightwatch? No

プロジェクト名であるmy-appディレクトリが作成され、必要な機能がインストールされます。
最後の方にあるメッセージの通り、my-appディレクトリに移動します。

To get started:

  cd my-app
  npm run dev

$ cd my-app

次にnpm run devでサーバを起動します。
devというエイリアスコマンドは、プロジェクト名のディレクトリ/package.jsonのscriptで設定されています。

デフォルトでは以下の設定になっています。
npm startやnpm run startでもサーバを起動することができるようです。

myapp/package.json

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
},

$ npm run dev

表示されるメッセージの通りhttp://localhost:8080にアクセスして、Vue.jsのデモ画面が確認できれば成功です。

Your application is running here: http://localhost:8080