GitHub Demo 地址
在線預(yù)覽
項目介紹
jh-vue3-admin 是基于 Vue3 + Vite4 + TypeScript5 + Element-Plus + Pinia 等最新主流技術(shù)棧構(gòu)建的后臺管理系統(tǒng)前端模板。
特性：
- 基于vue-admin-template項目升級到 vue3 版本
- 通過Mock模擬真實接口請求
- 動態(tài)權(quán)限控制、動態(tài)獲取菜單路由、按鈕級別的權(quán)限控制
- vue-i18n 國際化支持
- 暗黑模式支持
- 添加
TopHeader功能、支持頂欄和固釘動態(tài)切換 - 基礎(chǔ)系統(tǒng)設(shè)置模塊（用戶管理、角色管理、菜單管理、字典管理）
- 可視化用戶角色、菜單權(quán)限、按鈕權(quán)限配置
在線預(yù)覽
https://iotjin.github.io/jh-vue3-admin
技術(shù)棧
| 技術(shù) | 描述 | 官網(wǎng) |
|---|---|---|
| Vue3 | 漸進式 JavaScript 框架 | https://cn.vuejs.org/ |
| Element Plus | 基于 Vue 3，面向設(shè)計師和開發(fā)者的組件庫 | https://element-plus.gitee.io/zh-CN/ |
| Vite | 前端開發(fā)與構(gòu)建工具 | https://cn.vitejs.dev/ |
| TypeScript | 微軟新推出的一種語言，是 JavaScript 的超集 | https://www.tslang.cn/ |
| Pinia | 新一代狀態(tài)管理工具 | https://pinia.vuejs.org/zh/ |
| Axios | HTTP網(wǎng)絡(luò)請求 | https://axios-http.com/ |
| Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ |
| Echarts | 一個基于 JavaScript 的開源可視化圖表庫 | https://echarts.apache.org/zh/ |
| vue-i18n | Vue 國際化多語言插件 | https://vue-i18n.intlify.dev/ |
| VueUse | 基于Vue組合式API的實用工具集 | http://www.vueusejs.com/ |
| wangEditor | Typescript 開發(fā)的 Web 富文本編輯器 | https://www.wangeditor.com/ |
| UnoCSS | 一個具有高性能且極具靈活性的即時原子化 CSS 引擎 | https://unocss.dev/ |
vue-admin-template 介紹 (vue2 實現(xiàn))
這是一個極簡的 vue admin 管理后臺。它只包含了 Element UI & axios & iconfont & permission control & lint，這些搭建后臺必要的東西。
目前版本為 v4.0+ 基于 vue-cli 進行構(gòu)建，若你想使用舊版本，可以切換分支到tag/3.11.0，它不依賴 vue-cli。
如果你想要根據(jù)用戶角色來動態(tài)生成側(cè)邊欄和 router，你可以使用該分支permission-control
<a id="更新記錄"></a> 更新記錄
<details open id="重要更新">
<summary><strong>重要更新</strong></summary>
* v1.0.0版本，基于vue-admin-template模板項目升級到Vue3
</details>
環(huán)境準備
| 環(huán)境 | 名稱版本 | 備注 |
|---|---|---|
| 開發(fā)工具 | VSCode | 下載地址 |
| 運行環(huán)境 | Node 16+ | 下載地址 |
| VSCode插件(必裝) | 1. Vue Language Features (Volar) 2. TypeScript Vue Plugin (Volar) 3. 禁用 Vetur |
 vscode-plugin
|
項目啟動
# 克隆代碼
git clone https://github.com/iotjin/jh-vue3-admin
# 安裝 pnpm
npm install pnpm -g
# 安裝依賴
pnpm install
# 啟動運行
pnpm run dev
瀏覽器訪問 http://localhost:9528
在線預(yù)覽 https://iotjin.github.io/jh-vue3-admin
項目部署
# 項目打包
pnpm run build:prod
注意事項
-
自動導(dǎo)入插件自動生成默認關(guān)閉
模板項目的組件類型聲明已自動生成。如果添加和使用新的組件，請按照圖示方法開啟自動生成。在自動生成完成后，記得將其設(shè)置為
false，避免重復(fù)執(zhí)行引發(fā)沖突。
-
項目啟動瀏覽器訪問空白
請升級瀏覽器嘗試，低版本瀏覽器內(nèi)核可能不支持某些新的 JavaScript 語法，比如可選鏈操作符
?. -
項目同步倉庫更新升級
項目同步倉庫更新升級之后，建議
pnpm install安裝更新依賴之后啟動
預(yù)覽
部分頁面效果如下：
