浅谈Vue CLI 3结合Lerna进行UI框架设计

2020-06-14 06:12:24易采站长站整理

"router": true,
"routerHistoryMode": true,
"vuex": false,
"cssPreprocessor": "less",
// MAC OS X下生效,Windows下不生效,具体未深入研究
"packageManager": "yarn",
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"lintOn": ["save", "commit"] },
"@ziyi2/vue-cli-plugin-ui-base": {},
"@ziyi2/vue-cli-plugin-ui-cz": {},
"@ziyi2/vue-cli-plugin-ui-lint": {}
}
}

这里采用了官方设计的 @vue/cli-plugin-babel 和 @vue/cli-plugin-eslint 插件,同时自己设计了额外的三个插件来支持整个新的UI框架的起步:

@ziyi2/vue-cli-plugin-ui-base
:UI框架基础插件,生成Monorepo结构的源码目录(加入Lerna管理工具),生成基础通用的webpack配置(在VUE CLI 3的webpack配置上进行再配置,VUE CLI3提供了
vue.config.js
文件供开发者进行webpack再配置),提供了几个基础UI组件的示例(仅参考价值)。

@ziyi2/vue-cli-plugin-ui-cz
: UI框架的 cz 适配器插件,加入了 cz-customizable 、 commitlint 、 conventional-changelog ,用于生成Angular规范的Git提交说明、检测提交说明是否符合规范以及自动生成UI框架的升级日志等。

@ziyi2/vue-cli-plugin-ui-lint
:UI框架的lint-staged 插件,代码提交前会执行Eslint校验,校验不通过则不允许提交辣鸡代码。

这三个插件已经发布在npm的仓库里,如果是已有的Vue CLI 3项目,可直接通过

vue add @ziyi2/ui-cz
等命令进行安装使用,插件源码地址ziyi2/vue-cli3-lerna-ui/plugins ,如果想学习设计Vue CLI 3插件,可参考插件开发指南,不过官方文档可能不够详细,建议参考官方设计的插件或者别人设计的优秀插件。

Lerna

Lerna是一个Monorepo管理工具,使所有的组件(npm包)设计都集成在一个git仓库里,同时可以利用yarn的workspace特性,模拟发布的组件环境,从而使组件的开发和测试变得简单,不需要多次进行组件的发布测试(这里用Lerna进行Vue CLI插件开发也非常方便)。

同时Lerna还集成了版本发布工具,可以快速的对UI框架进行版本发布。

UI组件各自修复问题可以各自快速发布

patch
版本,如果UI组件整体有非兼容性更新,可以利用Lerna进行
MAJOR
版本发布,更多关于版本发布规范可查看语义化版本。

UI框架实践

利用Vue CLI 3的远程Preset,这里将自己设计的UI框架分享给大家进行实践使用:


// 可能获取会有点慢,大家耐心等待