Vue CLI 创建项目

创建项目文件

输入以下命令，然后根据提示来创建项目，hello-world 是项目名称。

vue create hello-world

默认 preset 用于快速创建项目，会默认安装 @vue/cli-plugin-babel 和 @vue/cli-plugin-eslint 这两个插件。

Vue CLI v5.0.4
? Please pick a preset: 
  yumanli ([Vue 2] router, vuex, babel, eslint) 
  blog ([Vue 2] router, vuex, babel, eslint) 
❯ Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features

手动选择，可以定制插件

Vue CLI v5.0.4
? Please pick a preset: 
  yumanli ([Vue 2] router, vuex, babel, eslint) 
  blog ([Vue 2] router, vuex, babel, eslint) 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features

配置文件

根据你的选择，会自动生成配置文件，或者在 package.json 中生成对应配置选项。

.gitignore

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

.editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

.browserslistrc

> 1%
last 2 versions
not dead
not ie 11

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

以下三种写法等价，都指向 @vue/babel-preset-app：

• @vue/babel-preset-app
• @vue/app
• @vue/cli-plugin-babel/preset

安装 @vue/cli-plugin-babel 的时候会自动安装 @vue/babel-preset-app。@vue/babel-preset-app 是一个 babel 的 preset，它包含了 babel-preset-env，用来转换 ES6 的语法。@vue/babel-preset-app 默认把 useBuiltIns: 'usage' 传递给 @babel/preset-env，来按需引入 API。

以下配置相当于默认配置。

module.exports = {
  presets: [
    [
      '@vue/babel-preset-app',
      {
        useBuiltIns: 'usage' ,
        corejs: 3
      }
    ]
  ]
}

以下配置强制引入 es.promise 和 es.symbol API，其他 API 按需引入。

module.exports = {
  presets: [
    [
      '@vue/babel-preset-app',
      {
        polyfills: [
          'es.promise',
          'es.symbol'
        ]
      }
    ]
  ]
}

以下配置需要在入口文件手动引入所有的 API，不再是按需引入了。

module.exports = {
  presets: [
    [
      '@vue/babel-preset-app',
      {
        useBuiltIns: 'entry' ,
        corejs: 3
      }
    ]
  ]
}

// entry
import 'core-js/stable'
import 'regenerator-runtime/runtime'

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

安装 @vue/cli-plugin-babel 的时候会自动安装 @babel/eslint-parser。

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

package.json

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3"
  }
}