4.5 KiB
Vue 3 + TypeScript + Vite
📚 团队文档中心：前后端统一架构、编码标准、接口契约与 agent 协作边界见仓库同级
../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中，增加本次升级内容