公共模块工程

主要目录介绍

|-- examples                                    # 公共模块使用用例目录
|-- lib                                         # 模块发布目录
|-- packages                                    # 模块源码开发目录
|-- packages.js                                 # 模块名称，描述，版本一些模块信息以及依赖包等其他配置
|-- vue.config.js                               # 反向代理与多页面配置
└── .npmignore                                  # 发布npm管理平台过滤文件，如果不写默认.gitignore

• 用例：用例调用发布模块传入提示信息，发布模块内部请求接口数据(服务请求需要同域下)合并提示信息展示

发布公共模块

// 将packages目录打包到lib
npm run lib
// 发布npm管理平台
npm publish
// 在外项目中使用发布模块，发布模块名称在package.json中设置name，当前名称whb-message
npm install whb-message -S

• 根据提升输入之前注册的账号、密码。（可以切换企业内部npm管理平台源）
• 每次发布版本号必须唯一，版本号遵循semver规则
• 不可安装同名项目模块

项目启动

// 安装工程依赖包
npm install
// 项目启动
npm run serve
// 项目发布
npm run build
// 代码检测
npm run lint

规范建议

目录

目录类目使用清晰明确，模糊或重复需整理整合，如：

• src/shared/utils 与 src/utils
• src/shared/net 与 src/utils/request.js

npm模块规范

1、模块私有依赖包使用自依赖dependencies(开发依赖devDependencies就不说明了)，模块依赖宿主安装的，设置 peerDependencies，一般是宿主系统用到的依赖包，可以把package.json的dependencies依赖部分放入peerDependencies，如此项目用到的依赖包(为方便使用未放入peerDependencies)：

• ant-design-vue 版本
• axios 版本
• vue-axios 版本

2、npm 统一使用淘宝源 npm config set registry https://registry.npm.taobao.org
3、每发布模块，自查公共模块是否需要调整peerDependencies

vue规范

1、组件json可配置化，低代码，分析组件构成抽象出组件结构与属性，使用json描述，再到具体组件实现。待改进组件：

• 查询栏(普通查询，高级查询),有案例，参考：SearchForm.vue, 和使用案例Index_demo.vue
• 表单(添加，编辑)
• 详情

2、组件共用的声明或方法可适当选择使用mixin整合，提高复用和开发效率，防止编码外散
3、常量整合减少重复配置
4、设计统一性，不重要的展示或交互体验导致组件改动，视影响程度，尽量做到维护优先原则
5、编码规范，具体如下：

• 文件夹字母全小写，单词短横线‘-’分割使用kebab-case风格
• 组件文件名、类、ts文件，除index使用小写外，使用大驼峰PascalBase
• 变量和属性使用小驼峰
• vue-router路由path和name使用全小写，单词使用短横线‘-’分割命名
• 样式使用kebab-case风格

项目分布管理

• 整体项目主要分，公共模块工程、子业务模块工程、发布工程。
• 公共模块工程，独立开发共享功能可独立发布及版本升级
• 子业务模块工程引入公共模块基于开发，并可设置公共模块版本号升级，重新安装引入
• 发布工程不是必须工程，子业务模块工程也可以是发布工程。如有必要需要总体管理发布，再上升再创建发布工程。发布工程引入公共模块工程，整合等多个分布的子业务模块，打包发布。
• 整合分布工程脚手架，可以使用git子版本管理submodule同步到依赖的开发目录中

开发相关文档

vue 官网文档