Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cloudhao1999/cloud-app-admin
cloud-app-admin 使用了最新的 Vue3.2 + Vite3 + Element-Plus + TypeScript 等主流技术开发。
https://github.com/cloudhao1999/cloud-app-admin
element-plus vitejs vue3-typescript vueuse
Last synced: 4 days ago
JSON representation
cloud-app-admin 使用了最新的 Vue3.2 + Vite3 + Element-Plus + TypeScript 等主流技术开发。
- Host: GitHub
- URL: https://github.com/cloudhao1999/cloud-app-admin
- Owner: cloudhao1999
- License: mit
- Created: 2022-05-17T03:13:54.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-10-11T02:00:28.000Z (about 2 years ago)
- Last Synced: 2024-12-22T16:06:51.105Z (11 days ago)
- Topics: element-plus, vitejs, vue3-typescript, vueuse
- Language: Vue
- Homepage:
- Size: 18.2 MB
- Stars: 412
- Watchers: 2
- Forks: 84
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
cloud-app-admin☁️
## 简介
cloud-app-admin 使用了最新的`vue3.2+` `vite3` `Element-Plus` `TypeScript` `Tailwind CSS`等主流技术开发，希望能和大家一起学习最新前端技术。
## 在线体验
线上地址： [cloud-app-admin](https://cloudhao1999.github.io/cloud-app-admin/)
## 项目文档（WIP）
线上地址： [cloud-blog](https://www.cloudhao.top/pages/c125c3/)
## 已实现功能
- [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，无需注册即可按需访问数千个图标作为组件 😊
## 安装使用
- 获取项目代码
```bash
git clone https://github.com/cloudhao1999/cloud-app-admin.git
```
- 安装依赖
```bash
cd cloud-app-admin
pnpm install
```
- 运行
```bash
pnpm dev
```
## 项目结构
```bash
├── LICENSE 授权文件
├── README.md README
├── dist 编译目录
│ ├── assets
│ ├── favicon.ico
│ ├── images
│ └── index.html
├── index.html HTML模板
├── locales I18n文件
│ ├── en.json
│ └── zh-CN.json
├── mock 模拟数据文件
│ ├── article.ts
│ ├── route.ts
│ ├── upload.ts
│ └── user.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── public 网站公共目录
│ ├── favicon.ico 网站图标
│ └── images 资源文件
├── screenshot 截图
│ ├── crud.png
│ ├── dashboard-dark.png
│ ├── dashboard-light.png
│ ├── editor.png
│ ├── i18n.png
│ ├── login.png
│ ├── mobile.png
│ └── nested.png
├── src 源码目录
│ ├── App.vue 页面入口
│ ├── api 接口文件
│ ├── assets 静态资源
│ ├── components 公共组件
│ ├── directives 指令库
│ ├── enum 全局枚举文件
│ ├── env.d.ts
│ ├── hooks 自定义hooks
│ ├── layouts 项目布局文件
│ ├── main.ts 程序入口
│ ├── model 模型定义类型文件
│ ├── plugins 插件文件
│ ├── router 路由文件
│ ├── store 全局状态
│ ├── style 全局样式
│ ├── utils 工具库
│ └── views 视图
├── stats.html
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
├── types ts类型定义
│ ├── auto-imports.d.ts
│ ├── components.d.ts
│ ├── http.d.ts
│ ├── menu.d.ts
│ ├── resultType.d.ts
│ ├── router.d.ts
│ ├── table.d.ts
│ └── viteEnv.d.ts
├── vite
│ ├── alias.ts vite别名配置
│ ├── plugins vite插件模块
│ └── util.ts vite工具库
└── vite.config.ts vite配置文件
```
## Git 贡献提交规范
项目已经内置angular提交规范，通过cz 代替git commit 命令即可
```bash
pnpm commit
```
## 注意 ⚠️
> 本项目从V1.7版本开始基于vite3构建，由于vite3不再支持node14.18以下版本，使用较低node版本进行安装或启动本项目可能会出现异常。推荐升级至最新稳定版本node16，或使用V1.6版本，V1.6及以下版本使用vite2构建。
## 运行截图
- 登陆页
- 首页
- 暗黑模式
- 富文本编辑器
- CRUD列表
- 国际化
- 多级菜单
- 自适应
## 浏览器支持
本地开发推荐使用`Chrome 90+` 浏览器
支持现代浏览器, 不支持 IE
| [
](http://godban.github.io/browsers-support-badges/)IE | [
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
| :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## Q&A
1. 启动项目进入首页出现401报错怎么回事？
这是由于时间线组件调用了GitHub的API来获取仓库的commit信息，调用API需要申请token，申请token的方法可参考 [github的token使用方法](https://blog.csdn.net/chengwenyang/article/details/120060010)，token获取后可以在`src/enum/secretEnum.ts`中进行修改，在`TimeLine.vue`组件中，你可以修改 `UserEnum.GITHUB_USER`,`UserEnum.GITHUB_REPO`,` SecretEnum.GITHUB_ACCESS_TOKEN`枚举字段实现监测自己仓库commit信息功能。
2. 登录界面账号密码是多少？
随便填，但是账号和密码需要遵循校验规则，账号为手机号或标准邮箱格式，密码不低于三位。