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