修改vue-element-admin左側導航欄的圖示
vue-element-admin一個基於 vue2.0 和 Eelement 的控制面板 UI 框架,這是使用vue技術棧開發的前端程式設計師的首選管理系統模板,模板以及非常的成熟了,並且有相關的社群和維護人員,開發時候遇到問題也不要慌。
推薦指數:star:star:62.1k
Github 地址:https://github.com/PanJiaChen/vue-element-admin
Demo體驗:https://panjiachen.github.io/vue-element-admin/#/dashboard
文件:https://panjiachen.github.io/vue-element-admin-site/zh/
今天就來說一下,怎使用這個模板,以及寫好了專案,怎麼樣把專案打包成靜態檔案,部署在伺服器上。
1:去github上面下載或者克隆
Github 地址:https://github.com/PanJiaChen/vue-element-admin
我這裡使用簡單粗暴的方式,直接下點選載按
2:把專案匯入vscode,點開終端,並且在專案裡面安裝依賴。
npm install --registry=https://registry.npm.taobao.org
建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
安裝完成會發現專案目錄中多了一個依賴資料夾
3:執行本地開發 啟動專案
npm run dev
4:瀏覽器開啟
執行成功就使用瀏覽器開啟http://localhost:9527/
可以在這個後臺管理系統的模板的基礎上,修改一些自己需要的程式碼,變成自己的開發的專案了,此處自行發揮,省略一萬字。
修改vue-element-admin左側導航欄的圖示
1:開啟阿里向量圖示庫https://www.iconfont.cn/
選擇一個圖示下載
選擇下載格式給svg的格式
2:
把我們下載的icon圖示的index.svg檔案複製到/src/icons/svg資料夾下
3:開啟src/router/index.js
在meta:{ icon}中引入即可。
4:
可以看到我從阿里向量下載下來的圖示,已經放到左側導航欄的圖示上去了~~
————————————————
版權宣告:本文為CSDN博主「祈澈菇涼」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。
原文連結:https://blog.csdn.net/qq_36538012/article/details/110523362