34
35

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-02-06

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
34
35
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
35

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?