@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的，这里将自己设计的UI框架分享给大家进行实践使用：
// 可能获取会有点慢，大家耐心等待 vue create --preset ziyi2/vue-cli3-lerna-ui my-project
如果报错 unable to get local issuer certificate ，可以设置 git config --global http.sslVerify false 。
如果远程确实获取preset.json失败，可以采用本地的方式，将preset.json 配置复制下来，放入新建的 preset.json 文件，执行以下命令生成UI框架：
vue create --preset preset.json my-project
执行后的生成过程如下：
脚本命令
// 启动开发服务 "serve": "vue-cli-service serve", // 生成静态资源 "build": "vue-cli-service build", // Eslint校验 "lint": "vue-cli-service lint", // 安装和链接Lerna repo的依赖 "bootstrap": "lerna bootstrap", // 更新升级日志 "cz:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md", // 构建 "lib": "lerna run lib"
如果需要利用GitHub Pages发布静态资源，可以新增命令 "deploy": "npm run build && gh-pages -d dist" ，需要安装 gh-page 依赖。
启动
进入项目目录，使用 yarn serve 命令启动开发态视图，如果是Windows系统，可能会报以下错误：
在Windows下 vue create 可能会采用npm进行依赖安装，MAC OS X下无此问题，此时需要额外使用yarn进行再一次安装操作（这里使用了yarn的workspace特性，因此安装依赖建议都使用yarn进行操作）：
lerna bootstrap
执行 yarn serve ：
这里给出了国际化、选择器、警告以及按钮等UI设计示例。
构建
执行 lerna run lib 后（构建可以配合 npm run lint 校验，校验不通过则构建失败），Lerna工具会对每一个npm包执行 lib 脚本：
这里分别对 utils 、 btn 、 theme 包进行了构建处理，其中 btn 采用了Vue CLI 3默认的构建库配置。
Monorepo结构
UI框架生成并构建后的Monorepo结构如下：
. ├── packages # workspaces │ ├── alert # 警告（不构建） │ │ ├── alert.vue # 组件源码 │ │ ├── index.js # npm包入口文件 │ │ └── package.json # npm包描述文件 │ ├── btn # 按钮 │ │ ├── lib # 目标文件 │ │ │ └── lib.common.js # npm包入口文件 │ │ ├── btn.vue # 组件源码 │ │ ├── index.js # 构建入口文件 │ │ ├── package.json # npm包描述文件(需要vue cli的开发态依赖) │ │ └── vue.config.js # 构建配置文件 │ ├── locale # 国际化 │ │ ├── lang # 语言包 │ │ │ ├── enjs # 英文 │ │ │ └── zh_CN.js # 中文 │ │ ├── mixins # 各个组件调用的国际化API │ │ ├── src # 源码 │ │ ├── index.js # npm包入口文件 │ │ ├── alert.vue # 组件源码 │ │ ├── index.js # npm包入口文件 │ │ └── package.json # npm包描述文件 │ ├── select # 选择器(类似于alert) │ ├── theme # 样式 │ │ ├── lib # 目标文件 │ │ │ ├── alert.css # 警告样式 │ │ │ ├── btn.css # 按钮样式 │ │ │ ├── index.css # 总体样式 │ │ │ └── select.css # 选择器样式 │ │ ├── src # 源文件 │ │ │ ├── utils # 通用方法和变量 │ │ │ ├── alert.less # 警告样式 │ │ │ ├── btn.less # 按钮样式 │ │ │ ├── index.less # 总体样式 │ │ │ └── select.less # 选择器样式 │ │ ├── gulpfile.js # 构建配置文件 │ │ └── package.json # npm包描述文件 │ └── utils # 工具方法 │ ├── lib # 目标文件（这里也可以采用lodash的方式，去掉lib文件夹这一层） │ ├── src # 源文件 │ ├── babel.config.js # 构建配置文件 │ └── package.json # npm包描述文件 ├── public # 公共资源目录 ├── src # 开发态目录 ├── .browserslistrc # UI框架目标浏览器配置 ├── .cz-config.js # cz定制化提交说明配置 ├── .gitignore # git忽略配置 ├── .lintstagedrc # lint-staged配置 ├── babel.config.js # vue cli的babel配置 ├── lerna.json # lerna配置 ├── package.json # vue cli容器描述文件（容器不是npm包） ├── postcss.config.js # postcss配置 ├── README.md # 说明 └── vue.common.js # 通用的组件构建配置文件
这里重点说明 src 文件， src 文件可以根据开发需要自行选定方案：
1、使用默认的进行开发和UI框架Demo演示，这里UI框架采用原生的 .vue 文件形式进行Demo演示，如果想使用 .md 文件进行演示，可以采用。
2、使用Vue 驱动的静态网站生成器VuePress，这个目前不是很稳定。 发布
发布
完全可以按照语义化版本进行：
1、各自npm包可以使用 npm publish 快速发布 MINOR 和 PATCH 版本。
2、如果某个npm包有非兼容性更新，那么可以使用 lerna publish 发布 MAJOR 版本。