前言：自己写从头做一个vue项目，没什么技术，主要是温顾流程。
> 没写完，只写到创建完项目
目录
node下载官网下载安装包，选默认设置安装，会自动配置变量， 若更改安装地址，修改（默认系统变量）变量path中C:\Program Files\nodejs\为新地址。（Window）默认全局安装文件所在位置：C:\Users\username\AppData\Roaming\npm\node_modules
安装完成使用node -v检测版本，这里使用vite创建vue项目，需要node版本>= 12.0.0
此后用(c)npm指令，加 -g表示全局安装，否则会在当前路径安装；加 -d（或 -dev）表示开发环境安装，将配置写入到package.json文件中devDependencies下，打包时不将该依赖打包；加 -s表示用在正式环境，将配置写入到package.json文件中dependencies下。
npm install -g cnpm --registry=https://registry.npm.taobao.orgdos窗口使用指令下载全局安装，安装完成后，dos窗口cnpm -v正常显示版本号，即为安装成功。安装成功后，基本可以用cnpm代替npm，在中国大陆使用cnpm下载速度会大幅提升。
npm install -g yarn同理终端安装，yarn -v检测 。
yarn create vite同理终端安装，vite -v检测 。
idea、Eclipse、EditPlus、SublimeText、VScode等，有免费有收费，有正版有盗版，这里略。
项目名不建议中文，不允许大写字母。不建议杠-_以外的符号
#yarn
yarn create @vitejs/app
#(c)npm
npm init @vitejs/app若网不好，会报错：
An unexpected error occurred: "https://registry.yarnpkg.com/@vitejs%2fcreate-app: connect ETIMEDOUT 104.16.21.35:443"
换成国内镜像，【参考：网不好！...】
### npm
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
### yarn
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global创建完后按提示选择：
### 项目名?直接回车默认"vite-project"
? Project name: » vite-project
### 选择一个框架，箭头选中后，回车提交
? Select a framework: » - Use arrow-keys. Return to submit.
vanilla
> vue
react
preact
lit
svelte
### 选择版本（我使用vite就是为了使用ts）
? Select a variant: » - Use arrow-keys. Return to submit.
vue
> vue-ts
### 完成，运行以下指令
Done. Now run:
cd vite-project //进入到项目目录
yarn //下载依赖，也可以npm i，依赖配置更改后都要运行该指令，初次也要下载vite
yarn dev //运行dev
### 运行成功，该窗口不关即可用浏览器访问以下地址
vite v2.9.1 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose //默认为空，需要进项目配置
ready in 289ms.依照步骤即可出现：
| 目录/文件 | 说明 |
|---|---|
| .vscode | vscode的配置文件，我电脑没装vscode，也在创建项目时默认生成了这个文件夹。 |
| .idea | idea配置文件，idea自动生成 |
| node_modules | npm 加载的项目依赖模块 |
| public | 静态资源目录，如图片、字体等。一般放下载的模板等。 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| .gitignore | 文件控制 Git 仓库中应排除跟踪的文件(可由文件类型、路径、通配符等确立)。你和你的团队可以随时更新这个文件来控制忽略哪种类型的文件。 copy过来的，不会用。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
| tsconfig.json | ts配置文件，预编译，错误提醒等 |
| tsconfig.node.json | |
| vite.config.json | 取代了以前的webpack.json，项目的配置内容 |
| yarn.lock | 锁住依赖版本，一般自动变更，不建议手动变更。不懂，以后再深入研究...... |
安装elementPlus
# 选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus全部导入
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App)
.use(ElementPlus)
.mount('#app')按需导入，则在打包时进打包用到的部分。需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。我这里用这个官网的方法失败报错了，大概版本的问题。————（最后基本确定是依赖的问题，确保完整下载依赖就没报错）。
使用vite github方法：（安装vite-plugin-style-import）
yarn add vite-plugin-style-import -Dimport { UserConfigExport } from 'vite'
import {
createStyleImportPlugin,
AndDesignVueResolve,
VantResolve,
ElementPlusResolve,
NutuiResolve,
AntdResolve,
} from 'vite-plugin-style-import'
export default (): UserConfigExport => {
return {
// 1. 如果使用的是ant-design 系列的 需要配置这个
// 2. 确保less安装在依赖 `yarn add less -D`
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
plugins: [
createStyleImportPlugin({
resolves:[
AndDesignVueResolve(),
VantResolve(),
ElementPlusResolve(),
NutuiResolve(),
AntdResolve(),]
libs: [
// 如果没有你需要的resolve，可以在lib内直接写，也可以给我们提供PR
{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/index`
},
},
],
}),
],
}
}项目较大，经常使用通用变量时使用vuex
下载：
yarn add vuex@next --save导入，创建，挂载，使用：
import {createStore} from 'vuex';
const store = createStore({
state() {
return {
appIsLogin: false,//是否登录
count: 0
}
},
mutations: {
updateState(state:any, payload:any) {
Object.keys(payload).forEach((x: string) => {
state[x] = payload[x];
});
},
},
})
export default store;### prettier
yarn add prettier -D
### eslint
yarn add eslint -D
### 执行命令
npx eslint --init选择配置：
Ok to proceed? (y) y
### 您想如何使用ESLint？
? How would you like to use ESLint? ...
To check syntax only //只检查语法
To check syntax and find problems //检查语法并发现问题
> To check syntax, find problems, and enforce code style //检查语法、发现问题并强制执行代码样式（非强迫症勿选）
### 你的项目使用什么类型的模块？
? What type of modules does your project use? ...
> JavaScript modules (import/export) //JavaScript模块（导入/导出） es6标准
CommonJS (require/exports) //CommonJS（要求/导出） CommonJS标准
None of these //都不是
### 项目用哪个框架？
? Which framework does your project use? ...
React
> Vue.js
None of these
### 你的项目是否支持ts？
Does your project use TypeScript? » Yes
### 在哪儿运行？（空格选中，回车确定）
? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node
### 为你的项目选择style
? How would you like to define a style for your project? ...
> Use a popular style guide //选择常用的默认配置
Answer questions about your style //自己选择
### 你想选择哪种style
? Which style guide do you want to follow? ...
> Airbnb: https://github.com/airbnb/javascript //阿里
Standard: https://github.com/standard/standard //GIT standard
Google: https://github.com/google/eslint-config-google //Google
XO: https://github.com/xojs/eslint-config-xo //XO
### 你想要什么格式的配置文件？
? What format do you want your config file to be in? ...
JavaScript
YAML
> JSON
### 你想现在就npm下载吗？
? Would you like to install them now with npm? » nopackage.json配置会多几个包，根目录下生成.eslintrc.js文件，因为目前vue的规范还是vue2，不支持vue3。这回导致vue3中template可以支持多节点的语法不能通过。
extends: [
// 'plugin:vue/essential', // vue2
'plugin:vue/vue3-recommended', // vue3
'standard'
],prettier这里需要安装到三个依赖包：
cnpm i prettier eslint-plugin-prettier eslint-config-prettier -D然后继续修改.eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'plugin:vue/essential',
'airbnb-base',
//"eslint:recommended",//启用eslint的默认规则
'plugin:prettier/recommended' // 新增，启用prettier的规则
],
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
plugins: [
'vue',
'@typescript-eslint',
'prettier' // 新增，插件的处理器
],
rules: {
'prettier/prettier': 'error' // 新增，不符合prettier规则的代码显示为error
},
};
其他配置：【eslint中文文档】、【eslint英文文档】
在rules属性下设置规则，以覆盖上面的规则。以下是将官网的可配置规则依照我的习惯设置。
/*.eslintrc.js*/
module.exports = {
root: true, // 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
// 'plugin:vue/essential', // vue2
"plugin:vue/vue3-recommended", // vue3
"airbnb-base",
"plugin:prettier/recommended",
],
parserOptions: {
ecmaVersion: "latest",
parser: "@typescript-eslint/parser",
sourceType: "module",
},
globals: {
var1: "writable", // 允许全局变量"var1"重写
var2: "readonly", // 不允许全局变量"var2"重写
},
plugins: ["vue", "@typescript-eslint", "prettier"],
rules: {
"prettier/prettier": "error",
/*
* 所有的规则默认都是禁用的。在配置文件中，使用 "extends": "eslint:recommended" 来启用推荐的规则，报告一些常见的问题，在下文中这些推荐的规则都带有一个√标记。
* 详见官网 https://eslint.bootcss.com/docs/rules/
* 赋值 0"off" 关闭/不提醒 1"warn" 提示/warning 2"error" 错误/警告
*/
/*
*Strict Mode
*该规则与使用严格模式和严格模式指令有关：
*
*/
// strict: 2, // 要求或禁止使用严格模式指令
/*
*Possible Errors
*这些规则与 JavaScript 代码中可能的错误或逻辑错误有关：
*
*/
"for-direction": 2, // 强制 “for" 循环中更新子句的计数器朝着正确的方向移动
"getter-return": 1, // 强制 getter 函数中出现 return 语句
// 'no-async-promise-executor': 2, // 禁止使用异步函数作为 Promise executor
// 'no-await-in-loop': 2, // 禁止在循环中出现 await
"no-compare-neg-zero": 1, // 禁止与 -0 进行比较
"no-cond-assign": 2, // 禁止条件表达式中出现赋值操作符
"no-console": 1, // 禁用 console
// 'no-constant-condition': 2, // 禁止在条件中使用常量表达式
// 'no-control-regex': 2, // 禁止在正则表达式中使用控制字符
"no-debugger": 1, // 禁用 debugger
"no-dupe-args": 2, // 禁止 function 定义中出现重名参数
"no-dupe-keys": 1, // 禁止对象字面量中出现重复的 key
"no-duplicate-case": 2, // 禁止出现重复的 case 标签
"no-empty": 2, // 禁止出现空语句块
// 'no-empty-character-class': 2, // 禁止在正则表达式中使用空字符集
"no-ex-assign": 1, // 禁止对 catch 子句的参数重新赋值
"no-extra-boolean-cast": 1, // 禁止不必要的布尔转换
"no-extra-parens": 1, // 禁止不必要的括号
"no-extra-semi": 1, // 禁止不必要的分号
"no-func-assign": 1, // 禁止对 function 声明重新赋值
"no-inner-declarations": 2, // 禁止在嵌套的块中出现变量声明或 function 声明
// 'no-invalid-regexp': 2, // 禁止 RegExp 构造函数中存在无效的正则表达式字符串
"no-irregular-whitespace": 2, // 禁止不规则的空白
"no-misleading-character-class": 2, // 不允许在字符类语法中出现由多个代码点组成的字符
"no-obj-calls": 2, // 禁止把全局对象作为函数调用
"no-prototype-builtins": 1, // 禁止直接调用 Object.prototypes 的内置属性
"no-regex-spaces": 2, // 禁止正则表达式字面量中出现多个空格
"no-sparse-arrays": 2, // 禁用稀疏数组
"no-template-curly-in-string": 2, // 禁止在常规字符串中出现模板字面量占位符语法
"no-unexpected-multiline": 2, // 禁止出现令人困惑的多行表达式
"no-unreachable": 2, // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
"no-unsafe-finally": 1, // 禁止在 finally 语句块中出现控制流语句
"no-unsafe-negation": 0, // 禁止对关系运算符的左操作数使用否定操作符
"require-atomic-updates": 1, // 禁止由于 await 或 yield的使用而可能导致出现竞态条件的赋值
"use-isnan": 2, // 要求使用 isNaN() 检查 NaN
"valid-typeof": 2, // 强制 typeof 表达式与有效的字符串进行比较
/*
*Best Practices
*这些规则是关于最佳实践的，帮助你避免一些问题
*
*/
"accessor-pairs": 1, // 强制 getter 和 setter 在对象中成对出现
"array-callback-return": 1, // 强制数组方法的回调函数中有 return 语句
"block-scoped-var": 2, // 强制把变量的使用限制在其定义的作用域范围内
"class-methods-use-this": 1, // 强制类方法使用 this
// complexity: [2, { max: 20 }], // 指定程序中允许的最大环路复杂度,末默认20
"consistent-return": 0, // 要求 return 语句要么总是指定返回的值，要么不指定
curly: [1, "multi-or-nest"], // 强制所有控制语句使用一致的括号风格
"default-case": 2, // 要求 switch 语句中有 default 分支
"dot-location": [1, "object"], // 强制在点号之前和之后一致的换行
"dot-notation": [2, { allowKeywords: false }], // 强制尽可能地使用点号
eqeqeq: 1, // 要求使用 === 和 !==
"guard-for-in": 0, // 要求 for-in 循环中有一个 if 语句
// "max-classes-per-file": [0, 99], // 强制每个文件中包含的的类的最大数量
"no-alert": 1, // 禁用 alert、confirm 和 prompt
"no-caller": 2, // 禁用 arguments.caller 或 arguments.callee
"no-case-declarations": 1, // 不允许在 case 子句中使用词法声明
"no-div-regex": 1, // 禁止除法操作符显式的出现在正则表达式开始的位置
"no-else-return": 1, // 禁止 if 语句中 return 语句之后有 else 块
"no-empty-function": 2, // 禁止出现空函数
// 'no-empty-pattern': 2, // 禁止使用空解构模式
"no-eq-null": 1, // 禁止在没有类型检查操作符的情况下与 null 进行比较
"no-eval": 1, // 禁用 eval()
"no-extend-native": [2, { exceptions: ["Object"] }], // 禁止扩展原生类型 示例值：允许扩展的内建列表
"no-extra-bind": 1, // 禁止不必要的 .bind() 调用
"no-extra-label": 1, // 禁用不必要的标签
"no-fallthrough": [1, { commentPattern: "break[\\s\\w]*omitted" }], // 禁止 case 语句落空
"no-floating-decimal": 1, // 禁止数字字面量中使用前导和末尾小数点
"no-global-assign": 2, // 禁止对原生对象或只读的全局对象进行赋值
"no-implicit-coercion": 0, // 禁止使用短符号进行类型转换
"no-implicit-globals": 0, // 禁止在全局范围内使用变量声明和 function 声明
"no-implied-eval": 1, // 禁止使用类似 eval() 的方法
"no-invalid-this": 2, // 禁止 this 关键字出现在类和类对象之外
"no-iterator": 2, // 禁用 __iterator__ 属性
"no-labels": [1, { allowLoop: false, allowSwitch: false }], // 禁用标签语句
// 'no-lone-blocks': 2, // 禁用不必要的嵌套块
// 'no-loop-func': 2, // 禁止在循环语句中出现包含不安全引用的函数声明
// 'no-magic-numbers': 2, // 禁用魔术数字
// 'no-multi-spaces': 2, // 禁止使用多个空格
// 'no-multi-str': 2, // 禁止使用多行字符串
// 'no-new': 2, // 禁止使用 new 以避免产生副作用
// 'no-new-func': 2, // 禁止对 Function 对象使用 new 操作符
// 'no-new-wrappers': 2, // 禁止对 String，Number 和 Boolean 使用 new 操作符
// 'no-octal': 2, // 禁用八进制字面量
// 'no-octal-escape': 2, // 禁止在字符串中使用八进制转义序列
"no-param-reassign": 1, // 禁止对 function 的参数进行重新赋值
// 'no-proto': 2, // 禁用 __proto__ 属性
// 'no-redeclare': 2, // 禁止多次声明同一变量
// 'no-restricted-properties': 2, // 禁止使用对象的某些属性
// 'no-return-assign': 2, // 禁止在 return 语句中使用赋值语句
// 'no-return-await': 2, // 禁用不必要的 return await
// 'no-script-url': 2, // 禁止使用 javascript: url
// 'no-self-assign': 2, // 禁止自我赋值
// 'no-self-compare': 2, // 禁止自身比较
// 'no-sequences': 2, // 禁用逗号操作符
// 'no-throw-literal': 2, // 禁止抛出异常字面量
// 'no-unmodified-loop-condition': 2, // 禁用一成不变的循环条件
// 'no-unused-expressions': 2, // 禁止出现未使用过的表达式
// 'no-unused-labels': 2, // 禁用出现未使用过的标
// 'no-useless-call': 2, // 禁止不必要的 .call() 和 .apply()
// 'no-useless-catch': 2, // 禁止不必要的 catch 子句
// 'no-useless-concat': 2, // 禁止不必要的字符串字面量或模板字面量的连接
// 'no-useless-escape': 2, // 禁用不必要的转义字符
// 'no-useless-return': 2, // 禁止多余的 return 语句
// 'no-void': 2, // 禁用 void 操作符
// 'no-warning-comments': 2, // 禁止在注释中使用特定的警告术语
// 'no-with': 2, // 禁用 with 语句
// 'prefer-named-capture-group': 2, // 建议在正则表达式中使用命名捕获组
// 'prefer-promise-reject-errors': 2, // 要求使用 Error 对象作为 Promise 拒绝的原因
// radix: 2, // 强制在 parseInt() 使用基数参数
// 'require-await': 2, // 禁止使用不带 await 表达式的 async 函数
// 'require-unicode-regexp': 2, // 强制在 RegExp 上使用 u 标志
"vars-on-top": 1, // 要求所有的 var 声明出现在它们所在的作用域顶部
// 'wrap-iife': 2, // 要求 IIFE 使用括号括起来
// yoda: 2, // 要求或禁止 “Yoda" 条件
/*
*Variables
*这些规则与变量声明有关：
*
*/
// 'init-declarations': 2, // 要求或禁止 var 声明中的初始化
// 'no-delete-var': 2, // 禁止删除变量
// 'no-label-var': 2, // 不允许标签与变量同名
// 'no-restricted-globals': 2, // 禁用特定的全局变量
// 'no-shadow': 2, // 禁止变量声明与外层作用域的变量同名
// 'no-shadow-restricted-names': 2, // 禁止将标识符定义为受限的名字
// 'no-undef': 2, // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
// 'no-undef-init': 2, // 禁止将变量初始化为 undefined
// 'no-undefined': 2, // 禁止将 undefined 作为标识符
"no-unused-vars": 2, // 禁止出现未使用过的变量
// 'no-use-before-define': 2, // 禁止在变量定义之前使用它们
/*
*Node.js and CommonJS
*这些规则是关于Node.js 或 在浏览器中使用CommonJS 的：
*
*/
// 'callback-return': 2, // 强制数组方法的回调函数中有 return 语句
// 'global-require': 2, // 要求 require() 出现在顶层模块作用域中
// 'handle-callback-err': 2, // 要求回调函数中有容错处理
// 'no-buffer-constructor': 2, // 禁用 Buffer() 构造函数
// 'no-mixed-requires': 2, // 禁止混合常规变量声明和 require 调用
// 'no-new-require': 2, // 禁止调用 require 时使用 new 操作符
// 'no-path-concat': 2, // 禁止对 __dirname 和 __filename 进行字符串连接
// 'no-process-env': 2, // 禁用 process.env
// 'no-process-exit': 2, // 禁用 process.exit()
// 'no-restricted-modules': 2, // 禁用通过 require 加载的指定模块
// 'no-sync': 2, // 禁用同步方法
/*
*Stylistic Issues
*这些规则是关于风格指南的，而且是非常主观的：
*
*/
// 'array-bracket-newline': 2, // 在数组开括号后和闭括号前强制换行
// 'array-bracket-spacing': 2, // 强制数组方括号中使用一致的空格
// 'array-element-newline': 0, // 强制数组元素间出现换行
// 'block-spacing': 2, // 禁止或强制在代码块中开括号前和闭括号后有空格
// 'brace-style': 2, // 强制在代码块中使用一致的大括号风格
// camelcase: 0, // 强制使用骆驼拼写法命名约定
// 'capitalized-comments': 0, // 强制或禁止对注释的第一个字母大写
// 'comma-dangle': 2, // 要求或禁止末尾逗号
// 'comma-spacing': 1, // 强制在逗号前后使用一致的空格
// 'comma-style': 1, // 强制使用一致的逗号风格
// 'computed-property-spacing': 2, // 强制在计算的属性的方括号中使用一致的空格
// 'consistent-this': 2, // 当获取当前执行环境的上下文时，强制使用一致的命名
// 'eol-last': 2, // 要求或禁止文件末尾存在空行
// 'func-call-spacing': 2, // 要求或禁止在函数标识符和其调用之间有空格
// 'func-name-matching': 2, // 要求函数名与赋值给它们的变量名或属性名相匹配
// 'func-names': 2, // 要求或禁止使用命名的 function 表达式
// 'func-style': 2, // 强制一致地使用 function 声明或表达式
// 'function-paren-newline': 2, // 强制在函数括号内使用一致的换行
// 'id-blacklist': 2, // 禁用指定的标识符
// 'id-length': 2, // 强制标识符的最小和最大长度
// 'id-match': 2, // 要求标识符匹配一个指定的正则表达式
// 'implicit-arrow-linebreak': 2, // 强制隐式返回的箭头函数体的位置
// indent: 2, // 强制使用一致的缩进
// // 'jsx-quotes': 0, // 强制在 JSX 属性中一致地使用双引号或单引号
// 'key-spacing': 2, // 强制在对象字面量的属性中键和值之间使用一致的间距
// 'keyword-spacing': 2, // 强制在关键字前后使用一致的空格
// 'line-comment-position': 0, // 强制行注释的位置
// 'linebreak-style': 2, // 强制使用一致的换行风格
// 'lines-around-comment': 2, // 要求在注释周围有空行
// 'lines-between-class-members': 2, // 要求或禁止类成员之间出现空行
// 'max-depth': 0, // 强制可嵌套的块的最大深度
// 'max-len': 0, // 强制一行的最大长度
// 'max-lines': 0, // 强制最大行数
// 'max-lines-per-function': 0, // 强制函数最大代码行数
// 'max-nested-callbacks': 0, // 强制回调函数最大嵌套深度
// 'max-params': 0, // 强制函数定义中最多允许的参数数量
// 'max-statements': 0, // 强制函数块最多允许的的语句数量
// 'max-statements-per-line': 0, // 强制每一行中所允许的最大语句数量
// 'multiline-comment-style': 2, // 强制对多行注释使用特定风格
// 'multiline-ternary': 0, // 要求或禁止在三元操作数中间换行
// 'new-cap': 1, // 要求构造函数首字母大写
// 'new-parens': 2, // 强制或禁止调用无参构造函数时有圆括号
// 'newline-per-chained-call': 2, // 要求方法链中每个调用都有一个换行符
// 'no-array-constructor': 2, // 禁用 Array 构造函数
// 'no-bitwise': 2, // 禁用按位运算符
// 'no-continue': 2, // 禁用 continue 语句
// 'no-inline-comments': 0, // 禁止在代码后使用内联注释
// 'no-lonely-if': 2, // 禁止 if 作为唯一的语句出现在 else 语句中
// 'no-mixed-operators': 2, // 禁止混合使用不同的操作符
// 'no-mixed-spaces-and-tabs': 2, // 禁止空格和 tab 的混合缩进
// 'no-multi-assign': 2, // 禁止连续赋值
// 'no-multiple-empty-lines': 2, // 禁止出现多行空行
// 'no-negated-condition': 2, // 禁用否定的表达式
// 'no-nested-ternary': 2, // 禁用嵌套的三元表达式
// 'no-new-object': 2, // 禁用 Object 的构造函数
"no-plusplus": 0, // 禁用一元操作符 ++ 和 --
// 'no-restricted-syntax': 2, // 禁用特定的语法
// 'no-tabs': 0, // 禁用 tab
// 'no-ternary': 2, // 禁用三元操作符
// 'no-trailing-spaces': 2, // 禁用行尾空格
// 'no-underscore-dangle': 2, // 禁止标识符中有悬空下划线
// 'no-unneeded-ternary': 2, // 禁止可以在有更简单的可替代的表达式时使用三元操作符
// 'no-whitespace-before-property': 2, // 禁止属性前有空白
// 'nonblock-statement-body-position': 2, // 强制单个语句的位置
// 'object-curly-newline': 2, // 强制大括号内换行符的一致性
// 'object-curly-spacing': 2, // 强制在大括号中使用一致的空格
// 'object-property-newline': 2, // 强制将对象的属性放在不同的行上
// 'one-var': 2, // 强制函数中的变量要么一起声明要么分开声明
// 'one-var-declaration-per-line': 2, // 要求或禁止在变量声明周围换行
// 'operator-assignment': 2, // 要求或禁止在可能的情况下使用简化的赋值操作符
// 'operator-linebreak': 2, // 强制操作符使用一致的换行符
// 'padded-blocks': 2, // 要求或禁止块内填充
// 'padding-line-between-statements': 2, // 要求或禁止在语句间填充空行
// 'prefer-object-spread': 2, // 禁止使用以对象字面量作为第一个参数的 Object.assign，优先使用对象扩展。
// 'quote-props': 2, // 要求对象字面量属性名称用引号括起来
// // quotes: 0, // 强制使用一致的反勾号、双引号或单引号
// semi: 2, // 要求或禁止使用分号代替 ASI
// 'semi-spacing': 2, // 强制分号之前和之后使用一致的空格
// 'semi-style': 2, // 强制分号的位置
// 'sort-keys': 0, // 要求对象属性按序排列
// 'sort-vars': 2, // 要求同一个声明块中的变量按顺序排列
// 'space-before-blocks': 2, // 强制在块之前使用一致的空格
// 'space-before-function-paren': 2, // 强制在 function的左括号之前使用一致的空格
// 'space-in-parens': 2, // 强制在圆括号内使用一致的空格
// 'space-infix-ops': 2, // 要求操作符周围有空格
// 'space-unary-ops': 2, // 强制在一元操作符前后使用一致的空格
"spaced-comment": 1, // 强制在注释中 // 或 /* 使用一致的空格
// 'switch-colon-spacing': 2, // 强制在 switch 的冒号左右有空格
// 'template-tag-spacing': 2, // 要求或禁止在模板标记和它们的字面量之间有空格
// 'unicode-bom': 2, // 要求或禁止 Unicode 字节顺序标记 (BOM)
// 'wrap-regex': 2, // 要求正则表达式被括号括起来
/*
*ECMAScript 6
*这些规则只与 ES6 有关, 即通常所说的 ES2015：
*
*/
// 'arrow-body-style': 2, // 要求箭头函数体使用大括号
// 'arrow-parens': 2, // 要求箭头函数的参数使用圆括号
// 'arrow-spacing': 2, // 强制箭头函数的箭头前后使用一致的空格
// 'constructor-super': 2, // 要求在构造函数中有 super() 的调用
// 'generator-star-spacing': 2, // 强制 generator 函数中 * 号周围使用一致的空格
// 'no-class-assign': 2, // 禁止修改类声明的变量
// 'no-confusing-arrow': 2, // 禁止在可能与比较操作符相混淆的地方使用箭头函数
// 'no-const-assign': 2, // 禁止修改 const 声明的变量
// 'no-dupe-class-members': 2, // 禁止类成员中出现重复的名称
// 'no-duplicate-imports': 2, // 禁止重复模块导入
// 'no-new-symbol': 2, // 禁止 Symbolnew 操作符和 new 一起使用
// 'no-restricted-imports': 2, // 禁止使用指定的 import 加载的模块
// 'no-this-before-super': 2, // 禁止在构造函数中，在调用 super() 之前使用 this 或 super
// 'no-useless-computed-key': 2, // 禁止在对象中使用不必要的计算属性
// 'no-useless-constructor': 2, // 禁用不必要的构造函数
// 'no-useless-rename': 2, // 禁止在 import 和 export 和解构赋值时将引用重命名为相同的名字
// 'no-var': 2, // 要求使用 let 或 const 而不是 var
// 'object-shorthand': 2, // 要求或禁止对象字面量中方法和属性使用简写语法
// 'prefer-arrow-callback': 2, // 要求回调函数使用箭头函数
"prefer-const": 1, // 要求使用 const 声明那些声明后不再被修改的变量
// 'prefer-destructuring': 2, // 优先使用数组和对象解构
// 'prefer-numeric-literals': 2, // 禁用 parseInt() 和 Number.parseInt()，使用二进制，八进制和十六进制字面量
// 'prefer-rest-params': 2, // 要求使用剩余参数而不是 arguments
// 'prefer-spread': 2, // 要求使用扩展运算符而非 .apply()
// 'prefer-template': 2, // 要求使用模板字面量而非字符串连接
// 'require-yield': 2, // 要求 generator 函数内有 yield
// 'rest-spread-spacing': 2, // 强制剩余和扩展运算符及其表达式之间有空格
// 'sort-imports': 2, // 强制模块内的 import 排序
// 'symbol-description': 2, // 要求 symbol 描述
// 'template-curly-spacing': 2, // 要求或禁止模板字符串中的嵌入表达式周围空格的使用
// 'yield-star-spacing': 2, // 强制在 yield* 表达式中 * 周围使用空格
},
};
若用idea需把设置放开。设置搜索eslint选第二个自动配置。
【Ctrl+Alt+S】
文件File ->设置settings ->语言与框架language & frameworks ->Javascript ->代码与质量工具Code Quality Tools ->ESLint
也可以放全局导入，在指定文件夹
npm init生成package.json配置文件，然后eslint --init生成配置文件，步骤同上，在idea设置中手动ESLint配置，找到文件路径即可。
安装路由vue-router
yarn add vue-router@4使用
挂载
设置固定路由
动态路由
安装vuex
npm i vuex@next