vue项目的创建

一、vue create 项目名称

image.png

二、选择项目配置（以下是根据自己情况选择）

image.png

2.1、选择vue版本，这里选vue2

image.png

2.2、路由模式，这里选择 Y ，history模式，这里影响部署需额外配置

image.png

2.3、css预处理器，这里选less

image.png

2.4、代码进行质量检查，这里选择严谨模式

image.png

2.5、代码进行质量检查校验时机，这里选保存校验

image.png

2.6、代码进行质量检查校验文件生成，还是配置到package.json,选择生成

image.png

2.7、是否将以上的选择操作，默认到以后创建vue项目的选择

image.png

三、配置 eslint + prettier（2.4选择严谨模式为基础）

image.png

3.1、.eslintrc.js文件，自动生成

image.png

1、在.eslintrc.js可以看到总体的eslint规则合并了vue、eslint和prettier的一些插件库
2、这里的配置将eslint和prettier的一些冲突处理了，所有可默认使用

3.2、.eslintrc.js同目录下创建.prettierrc.js文件,然后根据自己情况配置格式规则

module.exports = { 
  "printWidth": 80, // 每行代码长度（默认80）
  "tabWidth": 2, // 每个tab相当于多少个空格（默认2）
  "useTabs": false, // 是否使用tab进行缩进（默认false）
  "singleQuote": true, // 使用单引号（默认false）
  "semi": true, // 声明结尾使用分号(默认true)
  "trailingComma": "all", // 多行使用拖尾逗号（默认none）
  "bracketSpacing": true, // 对象字面量的大括号间使用空格（默认true）
  "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};