Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
35
Help us understand the problem. What is going on with this article?
@kamitomo

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

More than 1 year has passed since last update.

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
35
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kamitomo

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
35
Help us understand the problem. What is going on with this article?