GitHub Demo 地址在线预览jh-vue3-admin项目地址 | 在线预览## 项目介绍jh-vue3-admin 是基于 Vue3 Vite4 TypeScript5 Element-Plus Pinia 等最新主流技术栈构建的后台管理系统前端模板。特性基于vue-admin-template项目升级到 vue3 版本通过Mock模拟真实接口请求动态权限控制、动态获取菜单路由、按钮级别的权限控制vue-i18n 国际化支持暗黑模式支持添加TopHeader功能、支持顶栏和固钉动态切换基础系统设置模块用户管理、角色管理、菜单管理、字典管理可视化用户角色、菜单权限、按钮权限配置在线预览https://iotjin.github.io/jh-vue3-admin技术栈技术描述官网Vue3渐进式 JavaScript 框架https://cn.vuejs.org/Element Plus基于 Vue 3面向设计师和开发者的组件库https://element-plus.gitee.io/zh-CN/Vite前端开发与构建工具https://cn.vitejs.dev/TypeScript微软新推出的一种语言是 JavaScript 的超集https://www.tslang.cn/Pinia新一代状态管理工具https://pinia.vuejs.org/zh/AxiosHTTP网络请求https://axios-http.com/Vue RouterVue.js 的官方路由https://router.vuejs.org/zh/Echarts一个基于 JavaScript 的开源可视化图表库https://echarts.apache.org/zh/vue-i18nVue 国际化多语言插件https://vue-i18n.intlify.dev/VueUse基于Vue组合式API的实用工具集http://www.vueusejs.com/wangEditorTypescript 开发的 Web 富文本编辑器https://www.wangeditor.com/UnoCSS一个具有高性能且极具灵活性的即时原子化 CSS 引擎https://unocss.dev/vue-admin-template 介绍 (vue2 实现)这是一个极简的 vue admin 管理后台。它只包含了 Element UI axios iconfont permission control lint这些搭建后台必要的东西。线上地址国内访问目前版本为v4.0基于vue-cli进行构建若你想使用旧版本可以切换分支到tag/3.11.0它不依赖vue-cli。如果你想要根据用户角色来动态生成侧边栏和 router你可以使用该分支permission-control更新记录重要更新* v1.0.0版本基于vue-admin-template模板项目升级到Vue3环境准备环境名称版本备注开发工具VSCode下载地址运行环境Node 16下载地址VSCode插件(必装)1.Vue Language Features (Volar)2.TypeScript Vue Plugin (Volar)3. 禁用 Vetur项目启动# 克隆代码gitclone https://github.com/iotjin/jh-vue3-admin# 安装 pnpmnpminstallpnpm-g# 安装依赖pnpminstall# 启动运行pnpmrun dev浏览器访问 http://localhost:9528在线预览 https://iotjin.github.io/jh-vue3-admin项目部署# 项目打包pnpmrun build:prod注意事项自动导入插件自动生成默认关闭模板项目的组件类型声明已自动生成。如果添加和使用新的组件请按照图示方法开启自动生成。在自动生成完成后记得将其设置为false避免重复执行引发冲突。项目启动浏览器访问空白请升级浏览器尝试低版本浏览器内核可能不支持某些新的 JavaScript 语法比如可选链操作符?.项目同步仓库更新升级项目同步仓库更新升级之后建议pnpm install安装更新依赖之后启动预览部分页面效果如下