Vue CLI 3 インストールからプロジェクト作成まで

Windows コマンドプロンプトを起動します。

node & npm のバージョンは以下の通りです。

$ node --version
v10.14.2
$ npm --version
6.4.1

@vue/cli をグローバルにインストール

$ npm install -g @vue/cli
...
+ @vue/cli@3.4.0
added 668 packages from 500 contributors in 161.611s

プロジェクト作成（マニュアル）

以前はinitサブコマンドを使っていましたが ver3 から create です。

$ vue create vue-example

インストール方法を「デフォルト」か「手動」か選択するよう確認されます。

Vue CLI v3.4.0
? Please pick a preset:
  default (babel, eslint)
> Manually select features

ここでは「マニュアル」を選択します。
Manually select featuresを選んで Enter を押します。

次にプロジェクトに必要な機能を選択します。
下記の*がついた機能をインストールします。スペースキーでトグルしてください。

? Check the features needed for your project:
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 ( ) E2E Testing

選択したら Enter キーを押します。

router のヒストリーモード

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

ヒストリーモードを使用するので Y キーを入力して Enter を押します。

CSS プリプロセッサ

? 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

Stylusを選択した状態で Enter を押します。

ESLint

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

エラー防止のみのESLint with error prevention onlyを選択して Enter を押します。

Lint 実行タイミング

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

保存時に Lint を実行するためLint on saveのみチェックを入れて Enter を押します。

単体テスト

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
  Jest

ユニットテストはMocha + Chaiを選択して Enter を押します。

設定ファイル

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

設定ファイルは個別に管理するのでIn dedicated config filesを選択して Enter を押します。

プリセットの保存

? Save this as a preset for future projects? (y/N)

次回のインストールのためにこの設定を保存しておきます。y キーを入力して Enter キーを押します。

? Save preset as: example

ここではプリセット名をexampleと入力します。
Enter でインストールを開始します。

起動

> cd vue-example
> npm run serve