以下配置都是基于VUE cli 3构建的应用
配置路径别名
可以将各种常用路径,比如components,style的路径配置成一个别名,在引用的时候更方便。
在项目根目录新建vue.config.js配置文件,内容如下,alias
中就是别名配置,key为别名,value为对应的路径, @
表示根目录
// vue.config.js
module.exports = {
configureWebpack: {
resolve: {
alias: {
'styles': '@/assets/styles',
'components': '@/components',
},
},
},
}
配置好后在项目中使用:
js,vue:
import componentA from '~components/componentA'
css:
@import "~styles/someStyle.css"
请求重写
可以对发出的请求进行代理重写,还是在vue.config.js
文件中添加
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: {'^/api' : '/another_url'}
}
}
}
}
以上配置表示如果请求url中有/api
,那么把/api
替换成/another_url
stylus配置
stylus是CSS预处理器,帮助你更快乐地撸CSS,参考文档在此
安装
npm install -D stylus stylus-loader
使用
引用
对应的文件名为styl
css:
@import "~styles/mixins.styl"
js:
import "~styles/mixins.styl"
在style标签中使用
<style lang="stylus" scoped>
.title
line-height .6rem
background #eee
text-indent .2rem
</style>
eslint配置
ESLint 主要用来做代码检查,可以通过 .eslintrc
或 package.json
中的 eslintConfig
字段来配置。
package.json 中默认配置:
{
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off",
"indent": [
"warn",
4
],
"quotes": [
"warn",
"single"
]
},
"parserOptions": {
"parser": "babel-eslint"
}
},
}
规则都写在rules字段中,规则值可取'error' 'off' 'warn'
rules: {
"规则名": [规则值, 规则配置]
}
常用规则,完整规则查阅
'rules': {
// no-var
'no-var': 'error',
// 要求或禁止 var 声明中的初始化
'init-declarations': 2,
// 强制使用单引号
'quotes': ['error', 'single'],
// 要求或禁止使用分号而不是 ASI
'semi': ['error', 'never'],
// 禁止不必要的分号
'no-extra-semi': 'error',
// 强制使用一致的换行风格
'linebreak-style': ['error', 'unix'],
// 空格2个
'indent': ['error', 2, {'SwitchCase': 1}],
// 指定数组的元素之间要以空格隔开(,后面), never参数:[ 之前和 ] 之后不能带空格,always参数:[ 之前和 ] 之后必须带空格
'array-bracket-spacing': [2, 'never'],
// 在块级作用域外访问块内定义的变量是否报错提示
'block-scoped-var': 0,
// if while function 后面的{必须与if在同一行,java风格。
'brace-style': [2, '1tbs', {'allowSingleLine': true}],
// 双峰驼命名格式
'camelcase': 2,
// 数组和对象键值对最后一个逗号, never参数:不能带末尾的逗号, always参数:必须带末尾的逗号,
'comma-dangle': [2, 'never'],
// 控制逗号前后的空格
'comma-spacing': [2, {'before': false, 'after': true}],
// 控制逗号在行尾出现还是在行首出现
'comma-style': [2, 'last'],
// 圈复杂度
'complexity': [2, 9],
// 以方括号取对象属性时,[ 后面和 ] 前面是否需要空格, 可选参数 never, always
'computed-property-spacing': [2, 'never'],
// TODO 关闭 强制方法必须返回值,TypeScript强类型,不配置
// 'consistent-return': 0
}