修改vue-element-admin左侧导航栏的图标

以你之姓@ 2022-12-26 04:42 241阅读 0赞

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

推荐指数：star:star:62.1k  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]

文档：[https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]

![978c66b7b866e554d37efdf466f32d50.png][]

今天就来说一下，怎使用这个模板，以及写好了项目，怎么样把项目打包成静态文件，部署在服务器上。

1：去github上面下载或者克隆  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
我这里使用简单粗暴的方式，直接下点击载按钮

![a585087d3ee2f85bf595681b287d1807.png][]

2：把项目导入vscode，点开终端，并且在项目里面安装依赖。

npm install --registry=https://registry.npm.taobao.org

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

![a0fdd36df9cecc233f4477676d46cb40.png][]

安装完成会发现项目目录中多了一个依赖文件夹

![a0b7f83317fb2c1d84300e67e7198b4d.png][]

3：运行本地开发 启动项目

npm run dev

![8d134f9e410f97d1e4c7c49ee873ad83.png][]

4：浏览器打开  
运行成功就使用浏览器打开[http://localhost:9527/][http_localhost_9527]

![d75b9a89ba8641bf79b09cb9c56974bf.png][]

可以在这个后台管理系统的模板的基础上，修改一些自己需要的代码，变成自己的开发的项目了，此处自行发挥，省略一万字。

##### 修改vue-element-admin左侧导航栏的图标 #####

1：打开阿里矢量图标库[https://www.iconfont.cn/][https_www.iconfont.cn]  
选择一个图标下载

![13c143dfe4ea7d45901098f47f94869d.png][]

选择下载格式给svg的格式

2：  
把我们下载的icon图标的index.svg文件复制到/src/icons/svg文件夹下

![58ee57ff1d5c4aecc21c8c91bc6949aa.png][]

![9caea7610b437fdd056764ea9b9ac74d.png][]

3：打开src/router/index.js

在meta：\{ icon\}中引入即可。

![86b4ecbb00c866c2eebcbe22a1018f04.png][]

4:  
可以看到我从阿里矢量下载下来的图标，已经放到左侧导航栏的图标上去了~~

![1831a5a605fd5942d5c5b61945248657.png][]

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_panjiachen.github.io_vue-element-admin-site_zh]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin-site%2Fzh%2F
[978c66b7b866e554d37efdf466f32d50.png]: /images/20221120/fe5141188b5d407897619a25a2390575.png
[a585087d3ee2f85bf595681b287d1807.png]: /images/20221120/3a8c6592eb1b4dbeba8e25d1720c72f1.png
[a0fdd36df9cecc233f4477676d46cb40.png]: /images/20221120/29daecdd94df4c1bb9f2cd2f6e79a175.png
[a0b7f83317fb2c1d84300e67e7198b4d.png]: /images/20221120/54c39c0df35742e5b2f7029e9684ce66.png
[8d134f9e410f97d1e4c7c49ee873ad83.png]: /images/20221120/77d7fb44f4354de4844e32b9a0b707fd.png
[http_localhost_9527]: https://links.jianshu.com/go?to=http%3A%2F%2Flocalhost%3A9527%2F
[d75b9a89ba8641bf79b09cb9c56974bf.png]: /images/20221120/5162f4153b4c4e688febf055210c8fbc.png
[https_www.iconfont.cn]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.iconfont.cn%2F
[13c143dfe4ea7d45901098f47f94869d.png]: /images/20221120/6a280114dced49c785c5721337104782.png
[58ee57ff1d5c4aecc21c8c91bc6949aa.png]: /images/20221120/ba70ec60f5de407cb3d78508d54c5168.png
[9caea7610b437fdd056764ea9b9ac74d.png]: /images/20221120/49901547f50841b88d1697ce761698ae.png
[86b4ecbb00c866c2eebcbe22a1018f04.png]: /images/20221120/6d0c3b0c7bea4c41ac50ce1f8ed01fed.png
[1831a5a605fd5942d5c5b61945248657.png]: /images/20221120/97c094797d0442938a8f5102769a30a5.png