vue.js
vue-cli

Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)

はじめに

2018/8/10に待望のVue CLIのバージョン3.0.0がリリースされましたので、早速アップデートして使ってみたいと思います。

今回のバージョンは、大きなアップデートとなっており、パッケージ名についても今までの「vue-cli」から「@vue/cli」に変更となっています。

今までのVue CLIとの違い

vue.js開発者「Evan You」からの発表コメント( https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb )からポイントを抜粋し意訳しました。
詳細を確認したい方はリンク先のページをご確認ください。

今回のアップデートのには2つの目的があります。
1. 複数のツールを組み合わせるフロントエンド開発用ツールを簡単に使えるようにする。
2. 全てのVueアプリケーションのデフォルトになるようにVue CLIにベストプラクティスを組み込む。

Vue CLIは、webpack4に組み込まれたPre-Configuredビルド設定を簡単に出来るようにしており、ポストCSSと主要なCSSプリプロセッサのサポート、ES2017への対応、モダンモード(ES2017バンドルとレガシーバンドルの共存)、マルチページモード(複数のEntryポイントを持ったアプリケーション)などの特徴があります。

また、新しいプロジェクトを作成する際に、選択可能なオプションに以下のようなものが追加されています。
・TypeScript・PWA・VueRouter&Vuex・ESLint/TSLint/Prettier
・JestあるいはMochaのユニットテストツール
・CypressあるいはNightwatchのE2Eテストツール

プラグインシステム

VueCLI3はプラグインアーキテクチャで構築されており、独自のCLIプラグインを構築しVueCLIを拡張することができます。また、NPM上に公開されたCLI拡張用プラグインを追加することも可能になります。

GUI機能

Vue CLI 3には、新しいプロジェクトを作成するだけでなく、プロジェクト内のプラグインやタスクも管理できる便利なGUIが付属しています。
vue uiコマンドで起動することが可能です。(ただし、GUI機能はベータ版としての提供となります)

vue-cli のアンインストール

パッケージ名が旧バージョンから変更されているため、VueCLI3をインストールする前に、旧バージョンを削除してください。

$ npm uninstall vue-cli -g
# OR
$ yarn global remove vue-cli

Vue CLI3のインストール

Vue CLI3をインストールしましょう。
(Vue CLI3を使用するためにはNode.js8.9以上がインストールされている必要があります)

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

バージョンを確認

vue cliのバージョンが3であることを確認しましょう。

$ vue --version
3.0.0

新しいプロジェクトを作成

新しいVueアプリケーションを作成します。
(ここではアプリ名は「my−app」としています)

$ vue create my-app

すると以下の画面が表示されます。

Vue CLI v3.0.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

デフォルト設定(babel/ESlint)か手動設定かを、上下キーで選択します。

簡単に済ますにはデフォルト設定が楽ですが、どのような選択が可能なのか理解するために、手動設定を選択してみましょう。

「Manually select features」を選択すると、以下の画面になります。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

上から順に「1」〜「9」キーでチェックのON/OFFが出来ます。
また、「a」キーで全選択・全解除、「i」キーでチェックのON/OFFの反転をすることが出来ます。
せっかくなので全て選択してEnterしてみましょう。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? (Y/n) 

Use class-style component syntax?
クラススタイルでコンポーネントを書くかどうか確認されます。
詳細は公式サイトのTypeScriptサポートのページを参照してください。

今回はクラススタイルでの記述としたいため「Y」を入力します。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) 

Use Babel alongside TypeScript for auto-detected polyfills?
自動検出されたポリフィルにBabelとTypeScriptを使用するか確認されます。

こちらも使用するため「Y」を入力します。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production
) (Y/n) 

Use history mode for router? (Requires proper server setup for index fallback in production)
Vue Routerのヒストリーモードを使用するかどうか確認されます。

Vue Routerのヒストリーモードを使用した場合は、history.pushState APIを使用してシングルページアプリケーションの場合でも、ページのリロード無しにURL遷移を実現することが出来ます。

簡単に説明すると、Vue Routerのデフォルトのhashモードの場合のURLは「http://a.com/#/user 」となり、historyモードの場合は完全なURLを使用することが出来て「 http://a.com/user 」となります。

詳細は公式サイトのHTML5Historyモードのぺージを確認ください。

今回はキチンとしたURL構造を使いたいため「Y」を選択します。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production
) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
(Use arrow keys)
❯ SCSS/SASS 
  LESS 
  Stylus 

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
CSSプリプロセッサに何を使うか確認されます。
「SCSS/SASS」「LESS」「Stylus」の3つから選択可能です。
それぞれのCSSプリプロセッサの説明はしませんので、以下を参考にしてみてください。
http://idr-zz.hatenablog.com/entry/2017/09/12/065904

今回は「SASS」を使いたいので「SCSS/SASS」を選択します。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production
) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
SCSS/SASS
? Pick a linter / formatter config: 
  TSLint 
  ESLint with error prevention only 
❯ ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

Pick a linter / formatter config
Linter/Formatterの設定を確認されます。
「TSLint」「ESLint(4種類)」から選択可能です。
それぞれのLinter/Formatterの説明はしませんので、Google先生に聞いてみてください。

今回はTypeScriptメインで考えているため「TSLint」を選択してください。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production
) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

pick additional lint features
追加のLint機能の選択を確認されます。
「Lint on save(保存時のLint実行)」「Lint and fix on commit(コミット時のLint実行)」の2つの選択があります。

今回は両方ともチェック対象としたいため、「a」キーを押して両方選択します。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production
) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai 
  Jest 

Pick a unit testing solution
ユニットテストのツールを何にするか確認されます。
「Mocha + Chai」と「Jest」から選択が可能です。
どちらも有名なテストツールですので、少しググれば色々な情報が出てきます。

今回は「Jest」を選択します。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production
) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only) 
  Nightwatch (Selenium-based) 

Pick a E2E testing solution
E2Eテストツールに何を使うか確認されます。
「Cypress」と「Nightwatch」から選択が可能です。

今回は使い慣れているSeleniumベースの「Nightwatch」を選択します。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production
) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Nightwatch
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
Babel、PostCSS、ESLintなどの設定をどこでするかを確認されます。
「専用の設定ファイル」か「package.json」が選択可能です。

今回は1箇所で管理したいため「package.json」を選択します。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production
) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Nightwatch
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) 

Save this as a preset for future projects?
今回の設定内容を次回以降のプロジェクトで使用するために保存しておくかを確認されます。

今回は再利用可能なように保存しますので「Y」を選択します。

? Save this as a preset for future projects? Yes
? Save preset as: 

Save preset as
どこに保存するか確認されます。

今回は「~/test」とします。

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production
) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Nightwatch
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: ~test
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn 
  Use NPM 

Pick the package manager to use when installing dependencies
インストール時に使用するパッケージマネージャに何を使うか確認されます。
「Yarn」あるいは「NPM」が選択可能です。

今回はインストール速度の早い「Yarn」を使用します。

Vue CLI v3.0.0
✨  Creating project in XXXX
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.5.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
⠐ kind-of@^3.0.2

ここまで選択することで、アプリケーションの作成が始まりますので、終了まで待ちましょう。

yarn install v1.5.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 27.90s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-app.
👉  Get started with the following commands:

 $ cd my-app
 $ yarn serve

Successfully created project my-app.」が表示されたら完了です

アプリケーションの起動

ディレクトリを移動してサーバーを起動してみましょう。

旧バージョンでは「npm run dev」でサーバー起動でしたが、Vue CLI3からは「npm run serve」に変わっているので注意してください

$ cd my-app
$ npm run serve

ビルドが走ってサーバーが起動されるまで、しばらくお待ち下さい。

DONE  Compiled successfully in 7611ms                                               16:59:15

No type errors found
No lint errors found
Version: typescript 3.0.1, tslint 5.11.0
Time: 7290ms

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.1:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

上記が表示されれば、「 http://localhost:8080/ 」をブラウザで表示してください。

my-app 2018-08-11 17-02-30.png

無事に画面が立ち上がりました。

my-app 2018-08-11 17-06-16.png

ソースコードを確認すると上記のような構成で作成されていました。

この状態を初期状態としてアプリケーションを作りこんでいきましょう!

Vue CLI GUI

GUI機能の起動は以下のコマンドで行ってください。

$ vue ui

ブラウザが立ち上がり、GUI画面が表示がされます。

当初はプロジェクトが存在していないと思いますので、先ほどコマンドラインから作成したプロジェクトを取り込む場合は、「インポート」を行ってください。

Vue CLI GUIについては、いろいろと触ってからまたの機会に書きたいと思います。

さいごに

Vue CLIの使い勝手がどんどん良くなっていくのを感じました。
まだ、ベータ版ですがGUI機能も提供され、黒い画面に抵抗のある方も使いやすくなるかと思います。
これから使い込んでいきたいと思います。