VUE项目配置相关记录

以下配置都是基于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
  }