vue-cliでVue.jsのプロジェクトをscaffoldする
2017-04-20
最近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にアクセスすると、
のページが確認できます。
これでプロジェクトの雛形ができたので、あとは、srcディレクトリ配下にもりもりコードを書いていけば良さそうです。
テンプレート
vue-cliが提供する公式のテンプレートは、https://github.com/vuejs-templatesで公開されていて、現時点では、
- webpack
- webpack-simple
- browserify
- browserify-simple
- simple
の5つあります。
また、公式のテンプレートの他に、カスタムテンプレートを作成することもできるようで、 Vue.jsを使ったElectronアプリを作成するためのテンプレートとして、
というテンプレートがあり、便利です。
vue-cliの使い方について纏めてみました。 これからVue.jsを使いこなせるよう精進していきます。