目录结构
├── .github # GitHub 配置文件
│ ├── ISSUE_TEMPLATE # 问题提交参考模板
│ ├── workflows git # 工作流
├── .husky # 代码提交前校验配置文件
├── .vscode # IDE 工具推荐配置文件
│ │ ├── extensions.json # 一键安装平台推荐的 vscode 插件
│ │ ├── settings.json # 设置扩展程序或 vscode 编辑器的一些属性
│ │ ├── vue3.0.code-snippets # vue3.0 代码片段
│ │ └── vue3.2.code-snippets # vue3.2 代码片段
│ │ └── vue3.3.code-snippets # vue3.3 代码片段
├── build # 构建工具
│ │ ├── cdn.ts # 打包时采用 cdn 模式
│ │ ├── compress.ts # 打包时启用 gzip 压缩或 brotli 压缩
│ │ ├── info.ts # 输出打包信息(大小、用时)
│ │ ├── optimize.ts # vite 依赖预构建配置项
│ │ ├── plugins.ts # vite 相关插件存放处
│ │ ├── utils.ts # 构建工具常用方法抽离
├── locales # 国际化文件存放处
│ │ ├── en.yaml # 英文配置
│ │ ├── zh-CN.yaml # 中文配置
├── mock # mock 模拟后台数据
│ │ ├── asyncRoutes.ts # 模拟后台返回动态路由
│ │ ├── ...
├── node_modules # 模块依赖
├── public # 静态资源
│ │ ├── audio # 音频文件
│ │ ├── html # 静态 iframe 页面
│ │ ├── wasm # wasm 文件以及胶水代码
│ │ ├── favicon.ico # favicon
│ │ ├── logo.svg # logo
│ │ ├── platform-config.json # 全局配置文件(打包后修改也可生效)
├── src
│ ├── api # 接口请求统一管理
│ ├── assets # 字体、图片等静态资源
│ ├── components # 自定义通用组件
│ │ ├── ReAnimateSelector # [animate.css](https://animate.style/) 选择器组件
│ │ ├── ReAuth # 按钮级别权限组件(根据路由meta中的auths字段进行判断)
│ │ ├── ReBarcode # 条形码组件
│ │ ├── ReCol # 封装 element-plus 的 el-col 组件
│ │ ├── ReCountTo # 数字动画组件
│ │ ├── ReCropper # 图片裁剪组件
│ │ ├── ReCropperPreview # 图片裁剪预览组件
│ │ ├── ReDialog # 基于 element-plus 中 el-dialog 组件开发的函数式弹框
│ │ ├── ReFlicker # 圆点、方形闪烁动画组件
│ │ ├── ReFlop # 时间翻牌组件
│ │ ├── ReFlowChart # LogicFlow 流程图组件
│ │ ├── ReIcon # 图标组件
│ │ ├── ReImageVerify # 图形验证码组件
│ │ ├── ReMap # 高德地图组件
│ │ ├── RePerms # 按钮级别权限组件(根据登录接口返回的permissions字段进行判断)
│ │ ├── RePureTableBar # 配合 `@pureadmin/table` 实现快速便捷的表格操作 https://github.com/pure-admin/pure-admin-table */
│ │ ├── ReQrcode # 二维码组件
│ │ ├── ReSeamlessScroll # 无缝滚动组件
│ │ ├── ReSegmented # 分段控制器组件
│ │ ├── ReSelector # 选择器组件
│ │ ├── ReSplitPane # 切割面板组件
│ │ ├── ReText # 支持 Tooltip 提示的文本省略组件
│ │ ├── ReTreeLine # 树形连接线组件(基于element-plus)
│ │ ├── ReTypeit # 打字机效果组件
│ │ ├── ReVxeTableBar # 配合 vxe-table 实现快速便捷的表格操作
│ ├── config # 获取平台动态全局配置
│ ├── directives # 自定义指令
│ │ ├── auth # 按钮级别权限指令(根据路由meta中的auths字段进行判断)
│ │ ├── copy # 文本复制指令(默认双击复制)
│ │ ├── longpress # 长按指令
│ │ ├── optimize # 防抖、节流指令
│ │ ├── perms # 按钮级别权限指令(根据登录接口返回的permissions字段进行判断)
│ │ ├── ripple # 水波纹效果指令
│ ├── layout # 主要页面布局
│ ├── plugins # 处理一些库或插件,导出更方便的 api
│ ├── router # 路由配置
│ ├── store # pinia 状态管理
│ ├── style # 全局样式
│ │ ├── dark.scss # 暗黑模式样式适配文件
│ │ ├── element-plus.scss # 全局覆盖 element-plus 样式文件
│ │ ├── reset.scss # 全局重置样式文件
│ │ ├── sidebar.scss # layout 布局样式文件
│ │ ├── tailwind.css # tailwindcss 自定义样式配置文件
│ │ ├── ...
│ ├── utils # 全局工具方法
│ │ ├── http # 封装 axios 文件
│ │ ├── localforage # 二次封装 localforage (https://localforage.docschina.org/) 支持设置过期时间,提供完整的类型提示
│ │ ├── progress # 封装 nprogress
│ │ └── auth.ts # 处理用户信息和 token 相关
│ │ └── chinaArea.ts # 汉字转区域码
│ │ └── globalPolyfills.ts # 解决项目可能因为安装某个依赖出现 `global is not defined` 报错
│ │ └── message.ts # 消息提示函数
│ │ ├── mitt.ts # 触发公共事件,类似 EventBus
│ │ ├── preventDefault.ts # 阻止键盘F12、浏览器默认右键菜单、页面元素选中、图片默认可拖动的方法
│ │ ├── print.ts # 打印函数
│ │ ├── propTypes.ts # 二次封装 vue 的 propTypes
│ │ ├── responsive.ts # 全局响应式 storage 配置
│ │ ├── sso.ts # 前端单点登录逻辑处理
│ │ ├── tree.ts # 树结构相关处理函数
│ ├── views # 存放编写业务代码页面
│ ├── App.vue # 入口页面
│ ├── main.ts # 入口文件
├── types # 全局 TS 类型配置
│ │ ├── directives.d.ts # 全局自定义指令类型声明
│ │ ├── global-components.d.ts # 自定义全局组件获得 Volar 提示(自定义的全局组件需要在这里声明下才能获得 Volar 类型提示哦)
│ │ ├── global.d.ts # 全局类型声明,无需引入直接在 `.vue` 、`.ts` 、`.tsx` 文件使用即可获得类型提示
│ │ ├── index.d.ts # 此文件跟同级目录的 global.d.ts 文件一样也是全局类型声明,只不过这里存放一些零散的全局类型,无需引入直接在 .vue 、.ts 、.tsx 文件使用即可获得类型提示
│ │ ├── router.d.ts # 全局路由类型声明
│ │ ├── shims-tsx.d.ts # 该文件是为了给 .tsx 文件提供类型支持,在编写时能正确识别语法
│ │ └── shims-vue.d.ts # .vue、.scss 文件不是常规的文件类型,typescript 无法识别,所以我们需要通过下图的代码告诉 typescript 这些文件的类型,防止类型报错
├── .browserslistrc # 配置目标浏览器的环境
├── .dockerignore # 排除不需要上传到 docker 服务端的文件或目录
├── .editorconfig # 编辑器读取文件格式及样式定义配置 https://editorconfig.org/
├── .env # 全局环境变量配置(当 .env 文件与 .env.development、.env.production、.env.staging 这三个文件之一存在相同的配置 key 时,.env 优先级更低)
├── .env.development # 开发环境变量配置
├── .env.production # 生产环境变量配置
├── .env.staging # 预发布环境变量配置
├── .gitattributes # 自定义指定文件属性
├── .gitignore # git 提交忽略文件
├── .gitpod.yml # gitpod 部署配置
├── .lintstagedrc # lint-staged 配置
├── .markdownlint.json # markdown 格式检查配置
├── .npmrc # npm 配置文件
├── .nvmrc # 用于指定在使用 Node Version Manager(NVM)时要使用的特定 Node.js 版本
├── .prettierignore # prettier 语法检查忽略文件
├── .prettierrc.js # prettier 插件配置
├── .stylelintignore # stylelint 语法检查忽略文件
├── CHANGELOG.en_US.md # 版本更新日志(英文版)
├── CHANGELOG.md # 版本更新日志(英文版)
├── CHANGELOG.zh_CN.md # 版本更新日志(中文版)
├── Dockerfile # 用来构建 docker 镜像
├── LICENSE # 证书
├── README.en-US.md # README(英文版)
├── README.md # README
├── commitlint.config.js # git 提交前检查配置
├── eslint.config.js # eslint 语法检查配置
├── index.html # html 主入口
├── package.json # 依赖包管理以及命令配置
├── pnpm-lock.yaml # 依赖包版本锁定文件
├── postcss.config.js # postcss 插件配置
├── stylelint.config.js # stylelint 配置
├── tailwind.config.ts # tailwindcss 配置
├── tsconfig.json # typescript 配置
└── vite.config.ts # vite 配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
上次更新: 2024/11/27, 08:11:02