这里的版本是vue cli4

cnpm i @vue/cli -g

打开命令行，输入以下命令

vue ui

选择一个项目目录，点击在此创建新项目按钮

填写项目名称，git初始化信息，点击下一步

有提前准备好的预设就选择准备好的，没有就选择手动，点击下一步

创建项目时，以下四个功能一般需要选择

• Babel
• Router
• Linter/Formatter
• 使用配置文件

点击下一步

Pick a linter/formatter config选择标准配置ESLint + Standard config，点击创建项目

是否需要保留预设这个看你自己，需要的话给预设命名，保留，下一次直接使用即可

选择插件，点击添加插件按钮

搜索 vue-cli-plugin-element 安装

配置element ui-How do you want to import Element?

• Fully import表示全量导入
• Import on demand表示按需导入，可以减少打包后项目体积，所以一般选择这个

点击完成安装

选择依赖，点击安装依赖

选择运行依赖，搜索 axios

选择开发依赖，搜索 less

选择开发依赖，搜索 less-loader

每次启动项目时，都需要重新打开浏览器，解决办法就是添加一个配置文件，帮我们自动打开浏览器

在项目的根目录创建文件vue.config.js文件

// 如果有报错，检查一下是不是空格问题导致的
module.exports = {
  devServer: {
    // 设置自动打开浏览器
    open: true,
    // 端口号
    port: 9999
  }
}

启动项目，在项目根目录下，执行以下命令

npm run serve

在根目录下创建 .prettierrc 文件，eslint的配置文件，指定格式化的配置,实际文件中不要出现注释

{
    // 指定格式化时，末尾不添加分号;
    "semi": false,
    // 指定使用单引号''
    "singleQuote": true,
    // 设置一行的宽度，一行字符超过指定宽度强制换行，默认80
    "printWidth": 200
}

处理方法后面的括号需要一个空格问题，在根目录下.eslintrc.js文件中禁用space-before-function-paren

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 禁用方法后面的括号需要一个空格问题
    'space-before-function-paren': 0
  }
}