Velocity

方向を定めて

Vue CLI での環境構築覚え書き (2.x/3.x)

業務でVue.jsを使う機会があり、Vue CLIについて調べたのでまとめた

Vue CLIとは

Vue.jsを使った開発環境を整えるためのCLI (Command Line Interface)

2018/08/01現在、Vue CLI 3のステータスがRC (Release Candidate)*1
よって、正式バージョンのリリースが秒読み状態
数ヶ月もすれば環境はガラッと変わっていると思うので、ご参考までに。

前提条件

Node.jsとnpmがインストールされていること

インストール

npm i -g vue-cli

2018/08/01現在、stable versionの 2.9.6 が入る

今すぐ3.xを試したい好奇心旺盛な人は、
npm i -g @vue/cli

3.x へのアップデートに伴い、vue-cliから@vue/cliにパッケージ名が変更されている
2.x が入っていて 3.x に上げたい人は、npm rm -g vue-cli してから、3.xをインストールする必要があるみたい

プロジェクトの作成

vue create {project-name}

Vue CLI 3ではプロジェクト作成の推奨コマンド

Usage: create [options] <app-name>

create a new project powered by vue-cli-service


Options:

  -p, --preset <presetName>       Skip prompts and use saved or remote preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing dependencies (only for npm)
  -g, --git [message|false]       Force / skip git initialization, optionally specify initial commit message
  -f, --force                     Overwrite target directory if it exists
  -c, --clone                     Use git clone when fetching remote preset
  -x, --proxy                     Use specified proxy when creating project
  -h, --help                      output usage information

2系までのvue initに比べ、柔軟にプロジェクトを作成することができる

コマンドを入力すると、設定をデフォルトで行うかマニュアルで行うか聞かれるのでカーソルキーで選択し、Enterキーで確定する

defaultを選択した場合、babel + eslint の標準的なプロジェクトが作成される

Manually select featuresを選択した場合、プロジェクトに必要な要素を選択できるのだが...

正直チェックの付け方が分からなく、3分は悩んだ
Enterを押すと次の画面に行くし、適当なショートカットを探しても見つからない

結果から言うと 1~9 でチェックをON/OFFできる
この記事を読んだ方にはA~Zをポチりまくるという悲しいことは是非しないでいただきたい (恥を晒していくスタイル)

チェックできる要素は以下の9つ

  1. Babel
  2. TypeScript
  3. Progressive Web App (PWA) Support
  4. Router
  5. Vuex
  6. CSS Pre-processors
  7. Linter / Formatter
  8. Unit Testing
  9. E2E Testing

チェック後はEnterで先に進み、選択した機能に応じてyes/noを答えていく
TypeScriptがサポートされていたり、Linterの選択肢にPrettierが含まれていたり色々お〜となった

プロジェクトを作成した後は、
cd {project-name} でプロジェクトディレクトリに移動し、
yarn serve でアプリが立ち上がる(これはyarnの場合、npmの場合はnpm run serve)

vue init {template} {project-name}

Usage: init [options] <template> <app-name>

generate a project from a remote template (legacy API, requires @vue/cli-init)

Options:

  -c, --clone  Use git clone when fetching remote template
  --offline    Use cached template
  -h, --help   output usage information

2.x のプロジェクト作成時に良く使われてたコマンド

templateを基にした構成でプロジェクトを作成することができる テンプレートで良く使われるものは下の3つ

webpack

2018/8/1時点で一番starが付いているvue-cli用テンプレート(7,774)*2

webpackを使った単一ファイルコンポーネントのテンプレート
webpack + vue-loader + hot-reload + ESLint + Jest + Nightwatch

GitHub - vuejs-templates/webpack
A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

pwa

PWA(Progressive Web App)用のテンプレート

GitHub - vuejs-templates/pwa
PWA template for vue-cli based on the webpack template

webpack-simple

webpack + vue-loader とシンプルなテンプレートで見通しが良くカスタマイズしやすい
これも単一ファイルコンポーネントとして.vueファイルが生成される

GitHub - vuejs-templates/webpack-simple
A simple Webpack + vue-loader setup for quick prototyping.

こちらもいくつか質問されるので、良きように答える
するとプロジェクトが作成される

cd {project-name} でプロジェクトディレクトリに移動し
npm run dev でアプリが立ち上がる

段々雑になった気がしないでもないが、とりあえずこんな感じ

Vue CLI 3 の目玉機能の Vue CLI UI の体験も素晴らしいものだったので、気が向いたら記事書く.

*1:内部での最終テスト段階、β版の次のイメージ

*2:なんとなく非常に惜しい気がする