一，项目的搭建

其中的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的样式之后，因为这样才能完成覆盖。

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

ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（2）之创建项目
我们在创建项目的时候一定要遵循层次和命名的原则,同时也要有统一的规范,无论是多人项目还是单人项目,能够让人看着一目了然并赏析悦目,做一个有追求的程序员. 例如IA.WebApp是视图控制器层(表现层) ...
GitHub开源的10个超棒后台管理面板
目录 1.AdminLTE 2.vue-Element-Admin 3.tabler 4.Gentelella 5.ng2-admin 6.ant-design-pro 7.blur-admin 8. ...
10 个 GitHub 上超火和超好看的管理后台模版，后台管理项目有着落了
大家好,我是你们的超级猫,一个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 前言一般人没事的时候刷刷朋友圈.微博.电视剧.知乎,而有些人是没事的时候刷刷 GitHub ,看看最近有哪些流行的项目. 久而久 ...
Laravel大型项目系列教程（五）之文章和标签管理
Laravel大型项目系列教程(五)之文章和标签管理本节教程将大概完成文章和标签管理. 1.文章管理首先创建管理后台文章列表视图: $ php artisan generate:view admi ...
魏宇轩后台管理（1）_项目介绍
本系列博客汇总在这里:魏宇轩后台管理汇总目录一.简介 1.项目使用技术 2.重点知识点二.使用工具三.前端页面 1.登录界面 2.主页界面 3.用户数据新增界面 4.用户数据修改界面四.后台 ...
SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
Java项目:前台预定+后台管理酒店管理系统(java+SSM+jsp+mysql+maven)
源码获取:博客首页 "资源" 里下载! 一.项目简述功能介绍: 前台用户端:用户注册登录,房间展示,房间分类,房间按价格区间查询,房间评论,房间预订等等后台管理端:用户信息查 ...
美多后台管理和项目环境搭建
美多后台管理 Django框架已经提供了一个Admin管理后台,但是Admin的本身的页面可修改的页面布局效果比较少,无法满足公司定制页面需求,这时候就需要独立开发一套后台管理系统,满足公司对后台数据 ...
Laravel大型项目系列教程（二）之用户管理
Laravel大型项目系列教程(二) 一.前言本节教程将大概实现用户的注册.修改个人信息.管理用户功能二.Let's go 1.创建用户注册视图 <span style="font ...

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