121 lines
4.5 KiB
Markdown
121 lines
4.5 KiB
Markdown
# Vue 3 + TypeScript + Vite
|
||
|
||
> 📚 **团队文档中心**：前后端统一架构、编码标准、接口契约与 agent 协作边界见仓库同级 [`../docs/README.md`](../docs/README.md)（`architecture.md` / `coding-standards.md` / `agent-guide.md`）。业务开发请写在 `src/subsystem/**`，`src/framework/**` 为只读共享框架。
|
||
|
||
## 环境
|
||
|
||
### 安装node.js
|
||
安装18.20.7版本
|
||
|
||
### 安装npm
|
||
- 新版的nodejs已经集成了npm，输入 "npm -v" 来测试是否成功安装
|
||
- 设置npm镜像源为淘宝镜像：npm config set registry https://registry.npmmirror.com
|
||
|
||
### 安装开发工具及插件
|
||
安装Visual Studio Code开发工具
|
||
安装Vue Language Features (Volar)插件 ： 为.vue单文件组件提供代码高亮以及语法支持
|
||
安装TypeScript Vue Plugin (Volar)插件 ： ts语法支持
|
||
安装JavaScript (ES6) code snippets插件 : es6的快捷语法
|
||
|
||
|
||
#### 设置npm源为淘宝镜像
|
||
npm install --registry=https://registry.npmmirror.com
|
||
|
||
### 安装依赖
|
||
npm install
|
||
|
||
### 启动本地服务
|
||
npm run dev
|
||
|
||
### 打包测试环境
|
||
npm run build:stage
|
||
|
||
### 打包生产环境
|
||
npm run build:prod
|
||
|
||
|
||
|
||
|
||
# 框架文件、开发规范说明
|
||
|
||
## public
|
||
|
||
公共文件夹，不会被编译，以下情况适用
|
||
1、不会被源码引用（例如 robots.txt）
|
||
2、必须保持原有文件名（没有经过 hash）
|
||
3、或者你压根不想引入该资源，只是想得到其 URL。
|
||
|
||
## src/assets
|
||
公共静态文件夹，目录中文件会被编译
|
||
|
||
## src/framework
|
||
|
||
**api** 菜单框架访问后端服务接口
|
||
**components** 框架提供公共组件
|
||
**hooks** 组合式函数，集成了多个基础组件实现的通用函数
|
||
**layout** 菜单框架布局组件
|
||
**router** 静态路由
|
||
**store** 菜单使用的状态机（菜单配置、用户登录信息等等）
|
||
**styles** 公共css
|
||
**types** 公共对象（分页参数对象、弹窗属性对象）
|
||
**utils** 无状态ts函数、常量配置，例如时间处理工具
|
||
**views** 二级菜单内容显示组件
|
||
|
||
## src/subsystem
|
||
1.子系统开发目录
|
||
|
||
### 子系统第一次开发必做事项
|
||
|
||
**vite.config.ts**
|
||
1、将“**build.outDir**”修改为编译后的输出路径，直接输出到微服务发布包“resources/html/微服务名称”中，与后端服务一起，按原有流程发布版本
|
||
2、将“**server.proxy**”修改为微服务访问路径，在VSCode开发环境下，将代替nginx的作用
|
||
|
||
**public/data/data.js**
|
||
|
||
1、修改publicData.currentSubsystem数据，用于框架获取子系统菜单模块
|
||
2、修改publicData.currentSubsystemName数据，用于框架获取子系统中文名称
|
||
3、如存在需要兼容老框架的的前端页面，修改externalOldERPIndex数据，否则改为''
|
||
|
||
### 子系统后期更新框架注意事项
|
||
|
||
不需要覆盖的文件夹、文件,以下有改动，会特别说明，并单独修改
|
||
|
||
1、public
|
||
|
||
2、vite.config.ts
|
||
|
||
3、src\subsystem
|
||
|
||
|
||
覆盖完文件后，执行npm install
|
||
|
||
### 开发规范
|
||
|
||
**api** 后端服务接口，按照微服务名称划分子文件夹(/api/pms)，按照Controller划分ts文件(/api/pms/product.ts)
|
||
**router/dynamicRouter.ts** 菜单路由配置
|
||
**views** 菜单内容组件，按照一、二级菜单划分文件夹(/views/一级菜单名称/二级菜单名称)
|
||
**components** 子系统内部通用组件,如相同功能，在多个菜单内容组件中多次出现，可抽象为通用组件
|
||
**hooks** 子系统内业务相关组合式函数，集成了多个基础组件实现的通用函数
|
||
**store** 子系统内业务相关使用的状态机（参考框架使用场景）
|
||
**styles** 子系统内业务相关公共css
|
||
**types** 子系统内业务相关公共对象（参考框架使用场景）
|
||
**utils** 子系统内业务相关处理ts函数、业务常量配置
|
||
|
||
|
||
# UI组件使用规范
|
||
|
||
UI组件优先使用/src/framework/components/standard/中提供的UI组件，里面的组件使用都可以在框架提供的示例模块中找到使用代码。
|
||
|
||
如不满足或者没有，则表格组件使用vxe-table，除了表格组件，其他均使用elemen-plus提供的组件
|
||
|
||
如vxe-table、elemen-plus都不满足，则自己通过css、html实现组件化，并且泛用性高，请提交到框架负责人处，发布到公司的UI组件库
|
||
|
||
# JS/TS工具类推荐
|
||
|
||
相同功能优先使用/src/framework/utils/standard/中提供的ts，里面的组件使用都可以在框架提供的示例模块中找到使用代码。
|
||
|
||
已集成的其他ts工具：xe-utils
|
||
|
||
# 发布前注意事项
|
||
1、如果是独立模块或者系统,在/data/doc/升级日志.md中，增加本次升级内容
|