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の初期設定は以上です。