vue cli3系と4系の違い。プロジェクト作成後の設定ファイル。

Vue.js vscode

備忘録

環境

win10 home

code -v
1.40.2

node -v
v10.13.0

vue create -V
@vue/cli 4.1.2

EXTENSIONS

vscodeに追加しているEXTENSIONS

  • ESLint
  • stylelint
  • Vetur

プロジェクト作成

必要に応じて設定は適宜変更

プロジェクトの作成

vue create cli4-app

プリセットの選択

// 3系などで、プリセットを作成していた場合には、ここで選択可能
Vue CLI v4.1.2
? Please pick a preset:
  default (babel, eslint)
> Manually select features

開発に使用するライブラリなどを設定

? 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

HTML5のHistoryモードを使用するか否か

HTML5 History モード | Vue Router

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

使用する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

ESLintのconfigを選択

? Pick a linter / formatter config: 
  ESLint with error prevention only 
> ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Linterの設定を選択

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

テスト（Unit）フレームワークの選択

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

テスト（E2E）フレームワークの選択

? Pick a E2E testing solution: 
  Cypress (Chrome only)        
> Nightwatch (WebDriver-based)

E2Eの対象ブラウザ選択

? Pick browsers to run end-to-end test on 
 (*) Chrome
>(*) Firefox

BabelおよびESLintの設定ファイル形式を選択

? Where do you prefer placing config for Babel, ESLint, etc.? 
  In dedicated config files
> In package.json

vscodeの設定

プロジェクトルート配下に.vscodeフォルダを作成し、
settings.jsonを配置する。

{
  "eslint.autoFixOnSave": true,
  "editor.tabSize": 2,
  "editor.formatOnSave": false,
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "vetur.format.defaultFormatter.js": "none"
}

以上でLinterの自動修正など設定されたプロジェクトができるので、とりあえず開発には入れる。

package.json比較

ほぼ同じ条件で作成したプロジェクトのpackage.jsonを比較すると、
4系には"@vue/cli-plugin-router"と"@vue/cli-plugin-vuex"が追加されている。

{
  "name": "cli4-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-e2e-nightwatch": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-pwa": "^4.1.0",
+    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-unit-mocha": "^4.1.0",
+    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "chai": "^4.1.2",
    "chromedriver": "79",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "geckodriver": "^1.19.1",
    "sass": "^1.23.7",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/airbnb"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)"
        ],
        "env": {
          "mocha": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

詳細

cli.vuejs.org