Vue CLI v4で始めるVue.js開発環境

December 01, 2020

この記事は1年以上が経過しています。内容が古い可能性があります。

Vue CLI とは？

Vueの開発環境をCUI・GUIから生成・管理出来るツール

Vue.jsのVersionやTypeScript・Vuexなどのライブラリの選択、linter・formatter・testなどの設定が可能

Vueプロジェクトをwebからコマンド実行・モジュールインストールなど便利機能もある

vue-cliのインストール

yarn global add @vue/cli
vue -V
@vue/cli 4.5.9

CLIから構築する

Vueプロジェクトを生成する

vue create my-project

my-projectの部分は、作成するプロジェクト名を指定

プリセットの選択

Vue CLI v4.5.9
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

Default ([Vue 2] babel, eslint)

Vue 2のシンプルな構成で作成される eslintしかないので必要な物を別途インストールする必要がある
Default (Vue 3 Preview) ([Vue 3] babel, eslint)

Vue 3で上記同じシンプル構成で作成される
Manually select features

全て自分で設定する場合は選択する

ここからは、Manually select features を選択した場合

1. 必要なライブラリの選択

? 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

2. VueのVersionの選択

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x
  3.x (Preview)

2.x : Vue.js v2系で生成
3.x (Preview) : Vue.js v3系で生成

3. Classスタイルのコンポーネント

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? (y/N)

Y: Class APIで生成
n: Options APIで生成

4. TypeScriptとBabel

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

5. リンターとフォマッターの設定

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

6. Linterの実行タイミングの設定

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? 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

Lint on save　(保存時実行)
Lint and fix on commit　(コミット時実行)

7. Babel、ESLint等の設定ファイルを設定箇所

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

In dedicated config files　(各ツールの専用設定ファイルに記述する)
In package.json　(package.json内に記述する)

8. 今までの設定をプリセットとして保存するか

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save   
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

yとした場合、プリセット名を聞かれるので好きな名称を入力する

Save preset as:

GUI(Web UI)から構築する★

uiコマンドを使用してGUIを起動する

vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

1. プロジェクトの作成

2. プロジェクトの設定

マニュアルの選択内容は同一 ※一部日本語に対応していない選択がある

3. 完成

おまけ

自作したプロセット情報の保存場所・設定は、configコマンドで確認出来る

% vue config
Resolved path: /Users/garbanzo/.vuerc
 {
  "useTaobaoRegistry": false,
  "packageManager": "yarn",
  "presets": {
    "vue3-ts": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-typescript": {
          "classComponent": false
        },
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        }
      },
      "vueVersion": "3"
    },
    "web-ui": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": true,
          "useTsWithBabel": true
        },
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-jest": {}
      },
      "vueVersion": "3"
    }
  }
}

プリセットを削除するには、presetsから削除すれば消える

Garbanzo Note