1 、 vue/cli脚手架

• 什么是vue/cli：就是安装之后们可以得到vue的命令
• 脚手架的好处：就是开箱即用
• 安装vue/cli：vue2的版本 npm i @vue/cli@4.5.15，不写版本就是默认最新版本，最新版本是v3的
• vue -V 查看是否安装完成。

2、自动创建vue项目

• 第一步：vue create 项目名字 （自己项目的名字）
• 第二步：选择模块和包管理，等待手脚架项目创建完毕。（选择vue2
• 第三步：cd '自己创建的包名'， 进入到这个包名
• yarn serve 启动项目。或者是npm serve 项目名

3、手动创建vue项目

4 修改vue-cli项目的语法规则

第一步：找到项目根目录的.eslintrc.js配置文件

第二步：在rules配置选项中，修改默认的语法规则。

5 触犯ESlint 规则处理方式有3种

1 人肉修改，找到每个错误改掉，这种方式很锻炼自身的代码规范，但对应经验不足的开发者不是很友好

2 脚手架的自动ESlint工具，npm run lint/yarn lint

3 写完保存自动格式化ESlint的规范代码

自动保存并格式化这种方法要提前做一些配置，同时要注意一点的是使用第三种方法的时候打开项目一定要进入到项目文件中用vscode打开。

第一步配置1：安装两个插件（这时候就可以使用右击然后选择格式化）

第一个插件：官方插件，用于检查语法错误

第二个插件：格式化插件，用于实现自动格式化

第二步配置2：但是接下继续配置可以实现保存代码就格式化。

注：首先关闭掉自动保存代码，变成手动保存

第三步配置3：进入文件下配置代码

{
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
      "extensions": [
          ".js",
          ".vue",
          ".jsx",
          ".tsx"
      ]
  },
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}