【搭建/全套解决方案/部署】vue3的后台管理系统

下载该 laoder，执行：npm i --save-dev svg-sprite-loader@6.0.9 创建 vue.config.js 文件，新增如下配置：

1 src 新建 icons 文件夹 2 资料文件中，直接复制svg的文件夹到icons 3 在 icons 下创建 index.js 文件，该文件中需要完成两件事情： 这样就不需要写这个了：impo

图标处理方案1：外部图标 创建 components/SvgIcon/index.vue： 使用了引用组件的技术 是一个解决方案，复制就是 创建 utils/validate.js： 用于判断的工具

1 在 views 中 login 文件夹，创建 index.vue 文件 2 在 router/index.js 中增加以下路由配置 @就是src的意思 3 在 login/index.vue 中，

![3-6导入element-plus_00.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de910564c4884fcd957f7e

@vue/cli 在帮助我们创建项目的同时，也生成了很多无用的代码，那么这一小节我们需要去除掉这些无用的代码。 去除的方式如下所示： App.vue 初始化代码如下： 删除 views 文件夹下的所有

prettier 在代码保存时，直接去符合ESlint的标准检测，进行格式自动化 第一步 我们在VSC中安装： Prettier 第二步 项目的根目录，创建一个文件： .prettierrc 在文件中

首先是打开 项目中的： .eslintrc.js 这个文件中： root: true #表示 Eslint的规则限制于当前的根本目录 node: true #表示，node环境下启动Eslint的检测

这一小节我们需要创建一个 vue3 的项目，而创建项目的方式依然是通过 vue-cli 进行创建，vue