Vue CLI の変更点・使い方(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 )からポイントを抜粋し意訳しました。
詳細を確認したい方はリンク先のページをご確認ください。

今回のアップデートのには２つの目的があります。

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 CLIのインストール

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

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

バージョンを確認

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

$ vue --version
3.0.0

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

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

$ vue create my-app

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

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

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

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

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

? 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)
❯◉ Choose Vue version
 ◉ 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してみましょう。

? Choose a version of Vue.js that you want to start the project with (Use arrow 
keys)
❯ 2.x 
  3.x (Preview) 

「Choose a version of Vue.js that you want to start the project with」
Vue.jsのバージョンを２系、３系のどちらを使用するか確認されます。
現時点では３系はまだPreviewですので「2.x」を選択します。

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? (Y/n) 

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

今回はクラススタイルでの記述は行わないため「n」を入力します。
(Vue.jsの３系ではclass-styleの取り扱いがまだ確定していません)

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n) 

「Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)?」
自動検出されたポリフィルにBabelとTypeScriptを使用するか確認されます。

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

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? 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」を選択します。

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? 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)
❯ Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
  Stylus 

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

dart-sass/node-sassのどちらを使うかについては好みによりますが、SASSの公式ブログでnode-sass(LibSass)は非推奨宣言との記事がありましたので、dart-sassを推奨します。
https://sass-lang.com/blog/libsass-is-deprecated

今回は「Sass」を使いたいので「Sass/SCSS (with dart-sass) 」を選択します。

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? 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): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
  TSLint (deprecated) 

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

TSLintは非推奨となっています。
今回は、ESLintとPrettierを使いたいと思いますので「ESLint + Prettier」を選択してください。

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? 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): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? 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実行）」の２つの選択があります。

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

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? 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): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? 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」を選択します。

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? 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): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only) 
  Nightwatch (WebDriver-based) 
  WebdriverIO (WebDriver/DevTools based)  

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

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

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? 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): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggl
e all, <i> to invert selection)
❯◉ Chrome
 ◉ Firefox

「Pick browsers to run end-to-end test on」
E2Eテストツールで使用するブラウザを確認されます。
「Chrome」「Firefox」の２つから選択が可能です。

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

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? 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): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on Chrome, Firefox
? Where do you prefer placing config for Babel, 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」が選択可能です。

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

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA
, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? 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): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on Chrome, Firefox
? Where do you prefer placing config for Babel, 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」とします。

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

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

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

yarn install v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 22.93s.
⚓  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からは「yarn serve」に変わっているので注意してください

$ cd my-app
$ yarn serve

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

 DONE  Compiled successfully in 3782ms                                  16:44:49

No type errors found
Version: typescript 3.9.7
Time: 2070ms

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://xxx.xxx.xxx.xxx:8080/

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

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

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

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

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

Vue CLI GUI

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

$ vue ui

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

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

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

さいごに

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