一、各个配置文件

# 1.1 .env.development

​ vue 项目的生产环境在项目启动时,本地项目启动会首选运行.env 文件,然后运行.env.development 文件,此时如果两者当中有相同的变量,则会默认后执行的覆盖前者

当运行 npm run dev 的时候会以此文件为配置文件,这个文件中可以定义针对开发环境的环境变量

# 1.2 .env.production

​ 此文件会在上线服务器时运行,与.env.development 对比可以理解为一个为本地版,一个为线上版,且这个文件运行在 development 之后,也就是说相同变量会覆盖

当运行 npm run build:prod 的时候会以此文件为配置文件,这个文件中可以定义针对开发环境的环境变量

# 1.3 .env.staging

​ 可以理解为 production 环境的镜像, 尽最大可能来模拟产品线上的环境 (硬件,网络拓扑结构,数据库数据)

# 1.4 .eslintignore

​ 项目的 lint 校验前会检索目录中的.eslintignore 文件,并忽略文件中路径的内容,下面是在文件中书写的语法

1667203407505

# 1.5 .eslintrc.js

​ 同样作为 lint 校验的配置文件,用于修改 lint 校验的规则,以下是语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
// https://eslint.org/docs/user-guide/configuring

module.exports = {

//此项是用来告诉eslint找当前配置文件不能往父级查找
root: true,

//此项是用来指定eslint解析器的,解析器必须符合规则,babel-eslint解析器是对babel解析器的包装使其与ESLint解析
parser: 'babel-eslint',

//此项是用来指定javaScript语言类型和风格,sourceType用来指定js导入的方式,默认是script,此处设置为module,指某块导入方式
parserOptions: {
// 设置 script(默认) 或 module,如果代码是在ECMASCRIPT中的模块
sourceType: 'module',
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true
}
},

// 此项指定环境的全局变量,下面的配置指定为浏览器环境
env: {
"browser": true,
"node": true,
"commonjs": true,
"es6": true,
"amd": true
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
// 此项是用来配置标准的js风格,就是说写代码的时候要规范的写,如果你使用vs-code我觉得应该可以避免出错
extends: 'vue',
// 此项是用来提供插件的,插件名称省略了eslint-plugin-,下面这个配置是用来规范html的
plugins: [
'html',
"flow-vars",
"react"
],
/*
下面这些rules是用来设置从插件来的规范代码的规则,使用必须去掉前缀eslint-plugin-
主要有如下的设置规则,可以设置字符串也可以设置数字,两者效果一致
"off" -> 0 关闭规则
"warn" -> 1 开启警告规则
"error" -> 2 开启错误规则
*/
rules: {
// 不需要
"space-before-function-paren": 0, // 函数定义时括号前面要不要有空格
"eol-last": 0, // 文件以单一的换行符结束
"no-extra-semi": 0, // 可以多余的冒号
"semi": 0, // 语句可以不需要分号结尾
"eqeqeq": 0, // 必须使用全等
"one-var": 0, // 连续声明
"no-undef": 0, // 可以 有未定义的变量

// 警告
"no-extra-boolean-cast": 1, // 不必要的bool转换
"no-extra-parens": 1, // 非必要的括号
"no-empty": 1, // 块语句中的内容不能为空
"no-use-before-define": [1, "nofunc"], // 未定义前不能使用
"complexity": [1, 10], // 循环复杂度
"no-unused-vars": 1, // 不能有声明后未被使用的变量或参数
// vue
"flow-vars/define-flow-type": 1,
"flow-vars/use-flow-type": 1,

// react
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,

// 错误
"comma-dangle": [2, "never"], // 对象字面量项尾不能有逗号
"no-debugger": 2, // 禁止使用debugger
"no-constant-condition": 2, // 禁止在条件中使用常量表达式 if(true) if(1)
"no-dupe-args": 2, // 函数参数不能重复
"no-dupe-keys": 2, // 在创建对象字面量时不允许键重复 {a:1,a:1}
"no-duplicate-case": 2, // switch中的case标签不能重复
"no-empty-character-class": 2, // 正则表达式中的[]内容不能为空
"no-invalid-regexp": 2, // 禁止无效的正则表达式
"no-func-assign": 2, // 禁止重复的函数声明
"valid-typeof": 2, // 必须使用合法的typeof的值
"no-unreachable": 2, // 不能有无法执行的代码
"no-unexpected-multiline": 2, // 避免多行表达式
"no-sparse-arrays": 2, // 禁止稀疏数组, [1,,2]
"no-shadow-restricted-names": 2, // 严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-cond-assign": 2, // 禁止在条件表达式中使用赋值语句
"no-native-reassign": 2, // 不能重写native对象

// 代码风格
"no-else-return": 1, // 如果if语句里面有return,后面不能跟else语句
"no-multi-spaces": 1, // 不能用多余的空格
"key-spacing": [1, { // 对象字面量中冒号的前后空格
"beforeColon": false,
"afterColon": true
}],
"block-scoped-var": 2, // 块语句中使用var
"consistent-return": 2, // return 后面是否允许省略
"accessor-pairs": 2, // 在对象中使用getter/setter
"dot-location": [2, "property"], // 对象访问符的位置,换行的时候在行首还是行尾
"no-lone-blocks": 2, // 禁止不必要的嵌套块
"no-labels": 2, // 禁止标签声明
"no-extend-native": 2, // 禁止扩展native对象
"no-floating-decimal": 2, // 禁止省略浮点数中的0 .5 3.
"no-loop-func": 2, // 禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
"no-new-func": 2, // 禁止使用new Function
"no-self-compare": 2, // 不能比较自身
"no-sequences": 2, // 禁止使用逗号运算符
"no-throw-literal": 2, // 禁止抛出字面量错误 throw "error";
"no-return-assign": [2, "always"], // return 语句中不能有赋值表达式
"no-redeclare": [2, { // 禁止重复声明变量
"builtinGlobals": true
}],
"no-unused-expressions": [2, { // 禁止无用的表达式
"allowShortCircuit": true,
"allowTernary": true
}],
"no-useless-call": 2, // 禁止不必要的call和apply
"no-useless-concat": 2,
"no-void": 2, // 禁用void操作符
"no-with": 2, // 禁用with
"space-infix-ops": 2, // 中缀操作符周围要不要有空格
"valid-jsdoc": [2, { // jsdoc规则
"requireParamDescription": true,
"requireReturnDescription": true
}],
"no-warning-comments": [2, { // 不能有警告备注
"terms": ["todo", "fixme", "any other term"],
"location": "anywhere"
}],
"curly": 1, // 必须使用 if(){} 中的{}

// common js
"no-duplicate-imports": 1
}
}

# 二、项目开启

​ vuex 中、store 中与 router 中都需要模块化以适配多人开发的需求,并且函数名与组件名多需要符合规范

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

IRON 微信支付

微信支付

IRON 支付宝

支付宝

IRON 贝宝

贝宝