vue 模板二次开发准备

1. 准备工作

1. github 搜索 vue 模板，将其下载下来

2. 打开package.json 文件，升级core-js版本到**3.25.5**

3. 安装依赖，进入到该模板根目录，执行 npm i 命令安装全部依赖

4. 检查VsCode本身的插件ESLint 和 Vutur，便于开发

下载 vue-element-admin 模板，使用如下命令任意一个

git clone https://github.com/PanJiaChen/vue-element-admin.git

git clone https://gitee.com/panjiachen/vue-element-admin.git

这个模板太复杂了，里边集成了许多组件，并不适合做二次开发。但是我们可以在开发的时候使用他们的封装好的。下面我们再下载一个简单的，适合二次开发的后台模板。

下载 vue-admin-template 模板，使用如下命令任意一个

git clone https://github.com/PanJiaChen/vue-admin-template.git

git clone https://gitee.com/panjiachen/vue-admin-template.git

2. 项目目录介绍

3. 模板调整

3.1 项目重命名

注意：如果项目中有 package-lock.json 文件则和上面的修改方式一样。

3.2 elementUI 中文版本设置

默认下载的模板使用的elementUI是英文版本的，如果要修改成中文的。需要找到 src/main.js 文件修改。

在 src/main.js 文件中修改如下

修改后已经变成中文了，至于页面上其它不变是因为这是自己写在页面上的，当然不会变中文了。

3.3 Eslint 语法规范检查

Eslint 是一个代码检测工具，但是检测非常严格，哪怕是个空格也会报错，这让我们无法忍受，因此我需要把它关闭。可以在 vue.config.js 中设置 lintOnSave : false 即可关闭语法检查。

3.4 修改头部图标和标题

在src / sttings.js 中修改页面的 title、固定头部、显示logo

3.5 修改端口

我们可以将其改成我们喜欢的端口号。需要在 vue.config.js文件中修改。

3.6 修改侧边栏标题和图标

在 src / layout / components / Sidebar / Logo.vue 中的 data 函数中修改标题和图片请求地址。

我们自己先选定好需要替换的logo图片，保存到 src /assets —— 公用的静态资源 文件中，后续直接引用即可。

3.7 模板中图标的使用

src/icons/svg 目录下的图标都可以使用

图标文件名直接设置为svg-icon组件的iconClass属性

3.8 icon 图标的解析