# clean-admin-vue3+ts+ElementPlus+vite

**Repository Path**: continent_tyrant/clean-admin-vue3

## Basic Information

- **Project Name**: clean-admin-vue3+ts+ElementPlus+vite
- **Description**: clean-admin-vue3+ts+ElementPlus+vite
后台纯净项目，基于上述技术栈+element-admin的后台模板与若依芋道相结合，修改了其中部分逻辑，使其更容易被上手使用
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-02
- **Last Updated**: 2024-07-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


* nodejs > 16.18.0 && pnpm > 8.6.0 (强制使用pnpm)


* **最新技术栈**：使用 Vue3、Vite4 等前端前沿技术开发
* **TypeScript**: 应用程序级 JavaScript 的语言
* **主题**: 可配置的主题
* **国际化**：内置完善的国际化方案
* **权限**：内置完善的动态路由权限生成方案
* **组件**：二次封装了多个常用的组件
* **示例**：内置丰富的示例

## 技术栈

| 框架                                                                   | 说明               | 版本     |
|----------------------------------------------------------------------|------------------|--------|
| [Vue](https://staging-cn.vuejs.org/)                                 | Vue 框架           | 3.3.8 |
| [Vite](https://cn.vitejs.dev//)                                      | 开发与构建工具          | 4.5.0  |
| [Element Plus](https://element-plus.org/zh-CN/)                      | Element Plus     | 2.4.2 |
| [TypeScript](https://www.typescriptlang.org/docs/)                   | JavaScript 的超集   | 5.2.2  |
| [pinia](https://pinia.vuejs.org/)                                    | Vue 存储库 替代 vuex5 | 2.1.7 |
| [vueuse](https://vueuse.org/)                                        | 常用工具集            | 10.6.1 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化              | 9.6.5  |
| [vue-router](https://router.vuejs.org/)                              | Vue 路由           | 4.2.5  |
| [unocss](https://uno.antfu.me/)                                      | 原子 css          | 0.57.4  |
| [iconify](https://icon-sets.iconify.design/)                         | 在线图标库            | 3.1.1  |
| [wangeditor](https://www.wangeditor.com/)                            | 富文本编辑器           | 5.1.23 |

## 开发工具

推荐 VS Code 开发，配合插件如下：

| 插件名                           | 功能                       |
|-------------------------------|--------------------------|
| TypeScript Vue Plugin (Volar) | 用于 TypeScript 的 Vue 插件  |
| Vue Language Features (Volar) | Vue3.0 语法支持              |
| unocss                        | unocss for vscode           |
| Iconify IntelliSense          | Iconify 预览和搜索           |
| i18n Ally                     | 国际化智能提示               |
| Stylelint                     | Css    格式化               |
| Prettier                      | 代码格式化                   |
| ESLint                        | 脚本代码检查                  |
| DotENV                        | env 文件高亮                 |


```
#### 项目结构示意图

- build # 打包脚本相关
  - config # 配置文件
  - generate # 生成器
  - script # 脚本
  - vite # vite配置
- mock # mock文件夹
- public # 公共静态资源目录
- src # 主目录
  - api # 接口文件
  - assets # 资源文件
    -  icons # icon sprite 图标文件夹
    -  images # 项目存放图片的文件夹
    -  svg # 项目存放svg图片的文件夹
  - components # 公共组件 
  - design # 样式文件
  - directives # 指令
  - enums # 枚举/常量
  - hooks # hook
    - component # 组件相关hook
    - core # 基础hook
    - event # 事件相关hook
    - setting # 配置相关hook
    - web # web相关hook
  - layouts # 布局文件
    - default # 默认布局
    - iframe # iframe布局
    - page # 页面布局
  - locales # 多语言
  - logics # 逻辑
  - main.ts # 主入口
  - router # 路由配置
  - settings # 项目配置
    - componentSetting.ts # 组件配置
    - designSetting.ts # 样式配置
    - encryptionSetting.ts # 加密配置
    - localeSetting.ts # 多语言配置
    - projectSetting.ts # 项目配置
    - siteSetting.ts # 站点配置
  - store # 数据仓库
  - utils # 工具类
  - views # 页面
  - main.ts #项目入口
  - permission.ts  #路由权限操作
- test # 测试
  - server # 测试用到的服务
    - api # 测试服务器
    - upload # 测试上传服务器
    - websocket # 测试ws服务器
    - types # 类型文件
    - vite.config.ts # vite配置文件
    - windi.config.ts # windcss配置文件
- types #ts声明文件
- .env #环境对应配置
- package.json # 项目包管理配置
```

[菜单管理Api数据结构](https://vcnnhef1qe5k.feishu.cn/file/ARqib3DX6oE88vxuw7Mcmh77nNC?from=from_copylink)

[用户权限相关api数据结构](https://vcnnhef1qe5k.feishu.cn/file/BxMQbftcQoJLw5xZxAZcRdhVn7e)

[CRUD组件](https://vcnnhef1qe5k.feishu.cn/file/Rni9b2SsEoWzwWxtZh4c4aPYnGd)

[icon图标](https://vcnnhef1qe5k.feishu.cn/file/QF6HbCThtoyqhZxCoUnc8V6Wncr)

[菜单路由](https://vcnnhef1qe5k.feishu.cn/file/Rni9b2SsEoWzwWxtZh4c4aPYnGd)

[代码格式化](https://vcnnhef1qe5k.feishu.cn/file/KhyEbDvrmodW54xVi9PcJgb7nKh)

[国际化](https://vcnnhef1qe5k.feishu.cn/file/EwtvbJD99ohRxVxY1uacJ9tTn6b)

[通用方法配置](https://vcnnhef1qe5k.feishu.cn/file/Sy27bHVzto099yx3OpRcia4OnTb)

[系统组件](https://vcnnhef1qe5k.feishu.cn/file/I3U6beBVUo3FWOxhcxCco2aCn9g)

[字典数据](https://vcnnhef1qe5k.feishu.cn/file/ROefb8Dg9oWo6VxicEtcKEMMnnP)

[IDE调试](https://vcnnhef1qe5k.feishu.cn/file/Aol4bKGNRobWG2xtUXtcpTfVnJL)



## 更多项目说明文档待补充....有问题可以私信