3.4、调头熟悉Vue3 JS项目

建议您打开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                       系统目录

二、修改配置

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创新实验室” 喝咖啡 支持我们的开源与分享