vue-cliでVue.jsのプロジェクトをscaffoldする

最近Vue.jsに入門して、Vue.jsを使ったアプリケーションの環境を構築する方法を調べていました。 Vue.jsは、vue-cliというプロジェクトの雛形を作成するツールを提供してくれていて、これを使うことで簡単にプロジェクトを作成することができるようなので、使い方などを纏めておきます。


前提条件

この記事を書くにあたり使用した環境は、

  • ubuntu 16.04 lts
  • node.js 6.10.2
  • npm 3.10.10
  • vue-cli 2.8.1

です。

インストール

npmでインストールします。

npm install -g vue-cli

使い方

vue init テンプレート名 プロジェクト名

の形式で使います。 webpackを使ったmy-projectという名前のプロジェクトを作成するには、

vue init webpack my-project

を実行します。すると、

  • プロジェクト名
  • プロジェクトの説明
  • Author
  • vue-routerを使うか?
  • ESLintを使うか?
  • 単体テスト環境をセットアップするか?
  • e2eテスト環境をセットアップするか?

などを対話形式で答えていくことになり、結果、

% tree my-project
my-project
├── README.md
├── build
│   ├── 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
│   └── webpack.test.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── Hello.vue
│   ├── main.js
│   └── router
│       └── index.js
├── static
└── test
   ├── e2e
   │   ├── custom-assertions
   │   │   └── elementCount.js
   │   ├── nightwatch.conf.js
   │   ├── runner.js
   │   └── specs
   │       └── test.js
   └── unit
       ├── index.js
       ├── karma.conf.js
       └── specs
           └── Hello.spec.js

13 directories, 29 files

のディレクトリツリーが生成されます。

その後、npm installして、npm run devすると、開発用サーバが起動するので、 http;//localhost:8080にアクセスすると、

vue-cli-01

のページが確認できます。

これでプロジェクトの雛形ができたので、あとは、srcディレクトリ配下にもりもりコードを書いていけば良さそうです。

テンプレート

vue-cliが提供する公式のテンプレートは、https://github.com/vuejs-templatesで公開されていて、現時点では、

  • webpack
  • webpack-simple
  • browserify
  • browserify-simple
  • simple

の5つあります。

また、公式のテンプレートの他に、カスタムテンプレートを作成することもできるようで、 Vue.jsを使ったElectronアプリを作成するためのテンプレートとして、

simulatedgreg/electron-vue

というテンプレートがあり、便利です。


vue-cliの使い方について纏めてみました。 これからVue.jsを使いこなせるよう精進していきます。