Backstage management project series-(1)-basic project construction

One, the construction of the project

The prettier refers to this:

Second, download eslint related plug-ins

The first one: eslint: You can check whether the code meets the specification according to the configuration

Configuration: https://blog.csdn.net/m0_46057827/article/details/107302775

The second one: vetur: syntax highlighting and syntax completion (vue)

The third: prettier: code formatting plugin

Three, configure eslint

File-Preferences-Settings-Extensions-eslint-set in package.json

"eslint.codeAction.showDocumentation": {
    
    
        "enable": true
    },
    //配置保存时按照eslint文件的规则来处理一下代码
    "editor.codeActionsOnSave":{
    
    
        "source.fixAll.eslint": true
    },
    //配置eslint适用于vue代码
    "eslint.validate": [
        "vue",
        // "javascript",
        "typescript",
        "typescriptreact",
        "html"
      ],

Then add the configuration we need in the eslint file to overwrite the original rules:

after setting, some files will report an error, just save it once, but there are too many files to save it like this.

npm run lint

You can run the entire project again in accordance with the configuration rules.

Fourth, configure the global style management and basic styles

The configuration to make the theme variable scss file take effect globally:

module.exports = {
    
    
  devServer: {
    
    
    port: 3333,
    open: true
  },
  css: {
    
    
    loaderOptions: {
    
    
      sass: {
    
    
        data: `@import "@/assets/scss/variable.scss";`
      }
    }
  }
}

If it is less, it is configured like this:
install less, less-loader, style-resources-loader

and configure in vue.config.js:

const path = require('path')

//全局引入less变量文件variable.less
function addStyleResource(rule) {
    
    
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
    
    
            patterns: [path.resolve(__dirname, "./src/common/theme.less")]    //这里是你的全局less的存放地址
        })
}
module.exports = {
    
    
    //全局引入less变量文件
    chainWebpack: config => {
    
    
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    },
}

Five, the introduction of element ui

https://element.eleme.cn/#/zh-CN/component/quickstart It

should be noted that the global introduction of the less style is best after the element style, because in this way the coverage can be completed.