cloud-app-admin
cloud-app-admin copied to clipboard
cloud-app-admin 使用了最新的 Vue3.2 + Vite3 + Element-Plus + TypeScript 等主流技术开发。
cloud-app-admin☁️
简介
cloud-app-admin 使用了最新的vue3.2+
vite3
Element-Plus
TypeScript
Tailwind CSS
等主流技术开发,希望能和大家一起学习最新前端技术。
在线体验
线上地址: cloud-app-admin
已实现功能
- [x] 路由集成 🧭
- [x] 页面与按钮权限集成 🔒
- [x] 状态管理集成(Pinia)🍍
- [x] Hooks集成(VueUse)🪝
- [x] ElementPlus集成 🖌️
- [x] Tailwind CSS集成 🌹
- [x] Axios二次封装 📦
- [x] i18n国际化集成 🌍
- [x] 代码规范集成(EditorConfig、Eslint、Prettier、Husky、Lint-staged)📒
- [x] Vxe-table多维度图表组件引入 📈
- [x] 封装常用通知、表格Hooks 🎺
- [x] Echarts图表组件库引入 🪐
- [x] 富文本编辑器引入(WangEditor)📝
- [x] Mock引入 🔍
- [x] 支持暗黑模式 🎆
- [x] 支持动态换肤(CSS Variables方案) 🌈
- [x] unplugin-icons引入,配合unplugin-components,无需注册即可按需访问数千个图标作为组件 😊
安装使用
- 获取项目代码
git clone https://github.com/cloudhao1999/cloud-app-admin.git
- 安装依赖
cd cloud-app-admin
pnpm install
- 运行
pnpm dev
Git 贡献提交规范
项目已经内置angular提交规范,通过cz 代替git commit 命令即可
pnpm commit
注意 ⚠️
本项目从V1.7版本开始基于vite3构建,由于vite3不再支持node14.18以下版本,使用较低node版本进行安装或启动本项目可能会出现异常。推荐升级至最新稳定版本node16,或使用V1.6版本,V1.6及以下版本使用vite2构建。
运行截图
- 登陆页
- 首页
- 暗黑模式
- 富文本编辑器
- CRUD列表
- 国际化
- 多级菜单
- 自适应
浏览器支持
本地开发推荐使用Chrome 90+
浏览器
支持现代浏览器, 不支持 IE
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Q&A
-
启动项目进入首页出现401报错怎么回事?
这是由于时间线组件调用了GitHub的API来获取仓库的commit信息,调用API需要申请token,申请token的方法可参考 github的token使用方法,token获取后可以在
src/enum/secretEnum.ts
中进行修改,在TimeLine.vue
组件中,你可以修改UserEnum.GITHUB_USER
,UserEnum.GITHUB_REPO
,SecretEnum.GITHUB_ACCESS_TOKEN
枚举字段实现监测自己仓库commit信息功能。 -
登录界面账号密码是多少?
随便填,但是账号和密码需要遵循校验规则,账号为手机号或标准邮箱格式,密码不低于三位。