Jh-components-design-vue NPM

技术栈

Vue3 + Vite + Typescript + Arco Design Vue

原型

工作台-我的数据

核心原则

灵活可配置、高扩展低耦合。
组件式开发，底层简单组件互不影响，能够单独提供使用的前提下，也可组合为复杂业务组件。
主要实现【我的数据】复杂业务模块，由底层简单组件组合二次开发。

技术文档（持续完善）

我的数据（设计文档）

开发规范

统一按照项目中Eslint检查 + prettier格式化 + setting.json 配置的方式进行部分约束
语义化开发
普通变量/函数/ts、js文件名：小驼峰式
常量：大写字母 + 下划线
自定义组件命名（vue文件（除了index.vue），组件目录名（含index.vue））：大驼峰式
arco design组件使用调用方的：template中以小写字母 + 连接符-使用，与自定义组件区分
自定义指令命名：小驼峰，v开头标识为自定义指令，类如vMouseMenu
class命名：组件父class统一以jh-comp为前缀（组件内部不做要求），小写字母 + 连接符-
复杂业务组件可以import子组件内容，比如类型定义，但是子组件内部类型定义最好不要互相引用，保持独立, 公共的抽离至统一文件。
注释规范：
git commit规范：
样式color规范：统一采用ui库Arco Design Vue提供的色板，适配明暗色设置，不单独设置颜色

项目目录

目录	说明
.vscode
.vscode/extensions.json	需安装的vscode插件
.vscode/setting.json	vscode配置（自动保存、格式化等）
lib	打包构建成果目录
src
src/components	组件
src/components/common	组件统一配置
src/components/common/mimeIconSetting.ts	组件数据类型对应icon配置
src/components/common/operatorSetting.ts	组件操作类型配置
src/components/common/themeIconSetting.ts	组件icon主题配置
src/components/index.ts	组件导出统一出口
src/components/components.ts	组件全局类型定义（调用时可以对类型实时查看检查）
src/components/【comp name】	各组件目录
【comp name】/index.ts	组件导出出口
【comp name】/index.vue	组件视图
【comp name】/store.ts（types.ts）	组件状态管理文件（或类型文件）
【comp name】/children	子组件目录
【comp name】/setting.ts	组件配置文件
【comp name】/fontIcon	组件icon转字体文件
【comp name】/fontIcon/multipleColor	多色icon字体文件
【comp name】/fontIcon/singleColor	单色icon字体文件
src/directions/index.ts	自定义指令统一导出出口
src/directions/【direct name】	各指令目录
【direct name】/index.ts	指令导出出口
【direct name】/type.ts	指令设计类型文件
【direct name】/components	指令涉及组件
types	全局类型定义
types/index.ts	组件公共类型定义
types/store.ts	复杂组件状态管理抽象类

开发发布流程（待完善）

1. 开发流程

组件开发

iconFonts

统一采用阿里巴巴iconfont库，暂时使用私人账号，需要修改时联系@lixiangzhuan。字体icon样式统一以“jh-comp-icon-”开头，单色“jh-comp-icon-sc-”，彩色“jh-comp-icon-mc-”，因为部分需要彩色icon，需要开启项目的彩色选项，但黑白的icon开启该选项后做不到hover变色或自定义颜色，因此一套主题分为两个项目，单色“jh-comp-design-vue-single-color”和彩色项目“jh-comp-design-vue-multiple-color”。目前库中预设一套默认主题，后期可以预设多套主题icon。项目中预设iconFontTheme主题变量，后期调用方可根据不同需要修改icon主题，类如设置主题为‘dark’，所有的icon会在默认的基础上增加class“jh-comp-icon-sc-dark-”或者“jh-comp-icon-mc-dark-”，详见themeIconSetting.ts。需要在主题设置的基础上修改部分icon时可根据class自定义样式：font-face/font-family/content