后台管理项目系列-（一）--基本的项目搭建

一，项目的搭建

其中的prettier是指这个：

二，下载eslint相关的插件

第一个：eslint：可以根据配置检查代码是否满足规范

配置：https://blog.csdn.net/m0_46057827/article/details/107302775

第二个：vetur:语法高亮和语法补全（vue）

第三个：prettier:代码格式化插件

三，配置eslint

文件-首选项-设置-扩展-eslint-在package.json中设置

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

然后再在eslint文件中添加我们自己需要的配置来覆盖原有的规则：

设置完后，有些文件会报错，保存一次就行了，但是文件太多又不能都这样保存一次。

npm run lint

就可以把整个项目都按照配置规则搞一遍了。

四，配置全局的样式管理和基本样式

让主题变量scss文件全局生效的配置：

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

如果是less,则是这样配置：
安装less,less-loader,style-resources-loader

然后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)))
    },
}

五，引入element ui

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

需要注意的是，全局引入的less样式最好在element的样式之后，因为这样才能完成覆盖。