美文网首页
VUE项目配置相关记录

VUE项目配置相关记录

作者: 小毛同学 | 来源:发表于2019-08-21 11:45 被阅读0次

    以下配置都是基于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 主要用来做代码检查,可以通过 .eslintrcpackage.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
      }
    

    相关文章

      网友评论

          本文标题:VUE项目配置相关记录

          本文链接:https://www.haomeiwen.com/subject/sejbsctx.html