3.4、调头熟悉Vue3 JS项目

11/20/2022

建议您打开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.1、修改项目配置

项目的默认配置在 src/config/app-config.js 文件中

# 2.2、修改接口配置

项目支持 五个不同环境的配置,只需改环境文件中的VITE_APP_API_URLVITE_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创新实验室” 喝咖啡
支持我们的开源与分享
告白气球 (钢琴版)
JESSE T