javascriptのフレームワークとしてお馴染みのVue.jsですが、自分で一から環境構築やプロジェクトを作成するのは大変ですし、知識も必要になってきます。そこでコマンドを入力するだけでVue.jsの環境やプロジェクトのテンプレートファイルが一式で揃えられる「vue-cli」を導入とプロジェクト作成からビルドの方法までをまとめていきたいと思います。   こちらの記事はVue CLIのバージョンが2系のものとなります。新しいバージョンのVue CLI3系のインストールと環境構築についてはこちらの記事「vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ」をご覧ください。   その前に、vue-cliはnode.jsの環境が必要になりますので、あらかじめインストールをしておきます。詳しくはこちらの記事「WEB開発環境（Mac OS）に必要な各種インストール方法まとめ（1）」にもまとめておりますので参考に。  

vue-cliの環境構築

まずは、グローバルにvue-cliをインストールしていきます。下記コマンドでインストールしたら、バージョンを確認して表示されていればOKです。

$ npm install -g vue-cli
$ vue --version
2.9.6

  vue-cliがインストールできたら、Vueプロジェクトのテンプレートを用意していきます。まずはプロジェクト用のディレクトリを作成し、その場所まで移動します。そして下記コマンドでテンプレートを作成していきます。

$ cd プロジェクトディレクトリ
$ vue init [TEMPLATE_TYPE] [PROJECT_NAME]

  テンプレートの種類はいろいろあるのですが「webpack」がよく使われるようです。プロジェクト名は下記のように任意の名前をつけておきます。

$ vue init webpack vue_sample

  すると、初期設定が始まり、質問に対して答えていく形で進めていきます。まずはプロジェクト名から確認・変更で適宜、情報を入力、エンターで確定させて進めていきます。

? Project name (vue_sample)

  次にプロジェクトの説明文を入力します。こちらも適宜入力していきます。続いてプロジェクトの作者名の情報をいれていきます。

? Project description (A Vue.js project)
? Author

  そしてVue.jsのモードを選択します。コンパイラを含めるかどうかの違いで上下キーで項目の変更可能です。

> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates....

  次はvue-routerのインストール確認です。Yでインストール、nでインストール無しが選択できます。

? Install vue-router?

  ESLintのインストール確認です。必要に合わせてインストールしていきます。インストールする場合にはタイプを選択することになり適宜選択します。

? Use ESLint to lint your code?
> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)

  続いて自動単体テストツールのインストール確認です。こちらも必要に合わせてインストールします。同じくインストールする際には種類を選択します。

? Set up unit tests
> Jest
  Karma and Mocha
  none (configure it yourself)

  そして自動E2Eテストツールのインストール確認です。こちらも必要であればインストール可能です。

? Setup e2e tests with Nightwatch?

  最後に、各種モジュールのインストール方法確認です。NPM経由かYarn経由で問題ないでしょう。

? Should we run `npm install` for you after the project has been created? (recommended)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

  これらの設定が完了するとリソースのインストールとプロジェクトのセットアップが開始され、終了するとローカルホストで動作確認できる開発用のコマンドが表示されます

# Installing project dependencies ...
# ========================

〜 インストール＆セットアップ 〜

# Project initialization finished!
# ========================

To get started:
 $ cd [PROJECT_NAME]
 $ npm run dev

  では早速下記のコマンドでVueプロジェクトのソースコードをビルドしてローカル環境で確認してみます。

$ cd [PROJECT_NAME]
$ npm run dev

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

〜 略 〜

DONE Compiled successfully in 3052ms
Your application is running here: http://localhost:8080

  開発用モードでローカルホストのサーバーが起動しているので、「http://localhost:8080」でアクセスすると下記のようなページが表示されます。  

Vueプロジェクトの基本的なフォルダ構成

Vue.jsのプロジェクトは主に下記の構成でファイルが生成されます。設定によって多少の違いはありますが、重要なものは下記になります。

PROJECT_ROOT
  ┣ build
  ┣ config
  ┣ node_modules
  ┣ src
    ┣ assets
    ┣ components
    ┣ router
    ┣ App.vue
    ┗ main.js
  ┣ static
  ┣ test
  ┗ index.html

 

/build	webpackなどのビルド実行のファイルが含まれる
/config	ビルドの設定ファイルが含まれる
/node_modules	各種モジュールが含まれる
/src	ビルド前のソースコードフォルダ
/src/assets	画像やCSS、その他javascriptなどの静的ファイルが含まれる
/src/components	.vueの拡張子がついたコンポーネントファイルが含まれる
/src/router	ルーティング用の設定ファイルが含まれる
/src/App.vue	index.htmlに出力されるvue側のインデックスファイル
/src/main.js	各種ファイルをインポートして管理するエントリーポイント用ファイル
/static	ビルドに含めずにデプロイする用のファイルが含まれる
/test	各種テストツールが含まれる
/index.html	SPAでベースとなるインデックスファイル

  上記以外にも、package.jsonや.gitignore、.babelrcなどの設定ファイルが含まれています。また初回ビルド以降では、後述にあるビルドされたファイルが含められるdistフォルダもあります。  

Vueプロジェクトのソースコードをビルドし本番用にデプロイ

下記コマンドでプロジェクト内srcフォルダに含まれるソースコード一式を、デプロイ用にビルドします。

$ npm run build

> node build/build.js

〜 略 〜

Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

  PROJECT_ROOT配下の同階層にdistフォルダが生成され、その中にあるindex.htmlとstaticフォルダの一式を本番サーバーにアップロードしてデプロイ完了です。また、メッセージにもある通り、静的ファイルであるもののウェブサーバー上でないと動作しないので注意が必要です。  

---

  いかがでしょうか、Vue.jsを使ってウェブアプリケーションを構築する際には、このようにVue CLIを使うことでビルドに必要な環境やテンプレートファイルが一式揃って、手軽に始めることができます。より詳しくはこちらの書籍がとても参考になるのでオススメです！