# 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中，增加本次升级内容