Vue CLIの初期設定について

#Vue CLIで始めるVue.js

##Vue CLIとは
Vue.jsはCDNで簡単に導入することもできますが、本格的に開発をする場合はnpmでvue CLIをインストールして環境を整えると色々なメリットを享受できるようです。Vue CLIはVue.jsでアプリケーションをつくるための、**コマンドラインインタフェース(CLI)**というもので、これをインストールすることでwebpackやファイルのホットリロード、ルーティングなど様々な機能が使えるようになります。

※以下の設定はnode.jsがインストールされていたらおおよそ10分もあれば完了します。

##インストール

$npm install -g vue-cli

##プロジェクトの作成
プロジェクト名と使用するテンプレートを指定します。
下記ではwebpackを使用するように指定してありますが、他にも機能が限定されたwebpack-simpleなども用意されています。プロジェクトの開発規模によって選択すると良いでしょう。

$vue init webpack my-project

上記コマンドを叩いたあと色々聞かれますがとりあえずエンターキー連打ですべてYesでプロジェクトを生成します。

? Project name my-project
? Project description A Vue.js project
? Author 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
   vue-cli · Generated "my-project".

#ディレクトリを移動してサーバー起動
作成したプロジェクトの中に移動して、npm run devコマンドを実行するとサーバーが立ち上がります。

$ cd my-project/
$ npm run dev

Your application is running here: http://localhost:8080というメッセージが表示されるので、http://localhost:8080 にアクセスしてみると、上記のような、初期画面が表示されるのでこの状態から作業を開始していきます。

> my-project@1.0.0 dev /path-to/my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 28/33 modules 5 active ...project/src/components/HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                 b      
 DONE  Compiled successfully in 11050ms                                  0:08:23

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

##ディレクトリ構成
ちなみにディレクトリ構成は以下のようになっています。
実際に編集するファイルはほぼsrc以下にまとまっているようです。

my-project
	├─ build ・・・webpackの設定など
	│	├─ build.js
	│	├─ check-versions.js
	│	├─ dev-client.js
	│	├─ dev-server.js
	│	├─ utils.js
	│	├─ vue-loader.conf.js
	│	├─ webpack.base.conf.js
	│	├─ webpack.dev.conf.js
	│	└─ webpack.prod.conf.js
	│
	├─ config ・・・設定ファイル関係
	│	├─ dev.env.js
	│	├─ index.js ・・・ ポートを変更するときはこのファイルを編集する
	│	└─ prod.env.js
	│
	├─ src ・・・ 実際に編集するファイルはsrc以下のファイル
	│	├─ assets
	│	│	└─ logo.png
	│	├─ components
	│	│	└─ Hello.vue
	│	├─ router
	│	│	└─ index.js
	│	├─ main.js
	│	└─ App.vue
	│
	└─ index.html ・・・ 最初に読み込まれるHTMLファイル

ここまでの作業をGitHubに一旦pushしたのでここからSPAとか作っていこうと思います。
https://github.com/ysk/vue_spa

Vue CLIで始めるVue.jsの初期設定は以上です。