后台管理项目系列-(一)--基本的项目搭建

一,项目的搭建

后台管理项目系列-(一)--基本的项目搭建_第1张图片
其中的prettier是指这个:
后台管理项目系列-(一)--基本的项目搭建_第2张图片

二,下载eslint相关的插件

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

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

后台管理项目系列-(一)--基本的项目搭建_第3张图片

第二个:vetur:语法高亮和语法补全(vue)

后台管理项目系列-(一)--基本的项目搭建_第4张图片

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

后台管理项目系列-(一)--基本的项目搭建_第5张图片

三,配置eslint

文件-首选项-设置-扩展-eslint-在package.json中设置
后台管理项目系列-(一)--基本的项目搭建_第6张图片

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

然后再在eslint文件中添加我们自己需要的配置来覆盖原有的规则:
后台管理项目系列-(一)--基本的项目搭建_第7张图片
设置完后,有些文件会报错,保存一次就行了,但是文件太多又不能都这样保存一次。
后台管理项目系列-(一)--基本的项目搭建_第8张图片

npm run lint

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

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

后台管理项目系列-(一)--基本的项目搭建_第9张图片
让主题变量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
后台管理项目系列-(一)--基本的项目搭建_第10张图片
需要注意的是,全局引入的less样式最好在element的样式之后,因为这样才能完成覆盖。

你可能感兴趣的:(element,ui后台管理系列)