Posted at

【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.jsonscriptで設定されています。

デフォルトでは以下の設定になっています。

npm startnpm 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