建议您打开vscode,导入前端javascript-ant-design-vue3
后,对照着代码结构来阅读此文章,才能感受到其中的结构之美!
# 一、整体结构
# 1.1、选择JS
这里我们使用 JS 去讲解,为什么选择JS ,或者说你该选择JS还是TS,请看:Js和Ts的选型那些事儿
# 1.2、目录说明
src 源码目录
|-- api 所有api接口,按照`business、system、support`拆分子目录
|-- assets 静态资源,images, icons, styles等
|-- components 公用组件,按照`business、system、support`拆分子目录
|-- config 配置信息(项目配置)
|-- constants 常量信息,项目所有Enum, 全局常量等,按照`business、system、support`拆分子目录
|-- directives 自定义指令
|-- i18n 国际化
|-- lib 外部引用的插件存放及修改文件
|-- plugins 插件,全局使用
|-- router 路由,统一管理
|-- store pinia状态, 按照`business、system、support`拆分子目录
|-- theme 自定义样式主题
|-- utils 工具类
|-- views 视图目录,按照`business、system、support`拆分子目录
| |-- business 业务目录
| |-- support 支撑目录
| |-- system 系统目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 二、修改配置
# 2.1、修改项目配置
项目的默认配置在 src/config/app-config.js
文件中
# 2.2、修改接口配置
项目支持 五个不同环境的配置,只需改环境文件中的VITE_APP_API_URL
和VITE_APP_PROJECT_TITLE
即可.
具体 五个环境文件
- .env.localhost 本地环境, 执行
npm run localhost
- .env.development 开发环境, 执行
npm run dev
- .env.test 测试环境打包, 执行
npm run build:test
- .env.pre 预发布环境打包, 执行
npm run build:test
- .env.preod 生产(线上)环境打包, 执行
npm run build:test
# ※ 联系我们
1024创新实验室-主任:卓大 (opens new window),混迹于各个技术圈,研究过计算机,熟悉点 java,略懂点前端。
1024创新实验室(河南·洛阳) (opens new window) 致力于成为中原领先、国内一流的技术团队,以技术创新为驱动,合作各类项目(软件外包、技术顾问、培训等等)。
![]() | ![]() | ![]() |
加 主任 “卓大” 微信 拉你入群,一起学习 | 关注 “小镇程序员” 分享代码与生活、技术与赚钱 | 请 “1024创新实验室” 喝咖啡 支持我们的开源与分享 |