lib ├── theme-chalk # css 样式文件 │ ├── fonts # icons │ ├── alert.css # 按需引入的组件样式 │ ├── ... # 按需引入的组件样式 │ └── index.css # 完整引入样式
查看 gulpfile.js 文件：
'use strict'; const { series, src, dest } = require('gulp'); const sass = require('gulp-sass'); const autoprefixer = require('gulp-autoprefixer'); const cssmin = require('gulp-cssmin'); function compile() { return src('./src/*.scss') // sass转化成css .pipe(sass.sync()) // Parse CSS and add vendor prefixes to rules by Can I Use // css浏览器兼容处理 .pipe(autoprefixer({ browsers: ['ie > 9', 'last 2 versions'], cascade: false })) // 压缩css .pipe(cssmin()) .pipe(dest('./lib')); } function copyfont() { return src('./src/fonts/**') .pipe(cssmin()) .pipe(dest('./lib/fonts')); } exports.build = series(compile, copyfont);
Vue CLI 3 & Lerna
构建整个 Element 组件库的脚本繁多，构建的代码之间互相还有引用关系，对于开发的引用路径也会产生一定的约束。因此设计类似于 Element 的UI框架相对开发者而言需要一定的开发门槛。
这里基于Vue CLI 3的 开发/构建目标/库 能力以及 Lerna 工具设计了一个UI框架，这个UI框架集成了以下特点：
1、 结构特点 ：每个UI组件都是一个npm包， 多语言、工具和样式 都是自成体系的npm包，可被业务或UI组件灵活引用，同时天然按需加载。
2、 配置特点 ：如果需要进行构建处理，那么每个npm包可单独进行构建配置，配置变得更加简单。结合Vue CLI3的 构件库 能力，对于简单UI组件的构建几乎可以做到webpack零配置，当然需要特殊的webpack loader除外。
3、 发布特点 ：组件库的版本迭代可以更快，不需要进行整体构建，每个组件可单独快速发布 PATCH 或 MINOR 版本。
这里设定业务层面需要进行webpack构建处理，因此可以对UI框架的组件不进行构建处理，当然如果UI组件的设计需要特殊的webpack loader处理除外，否则业务层面需要做额外的webpack配置。当然不构建处理是相对于一定的使用场景的，不构建处理可能也会产生额外的一些问题。
这个UI框架的设计也会有一些缺陷：
1、没有完整引入功能（也可以进行整体构建，但是这里不推荐）
2、不提供UMD模块
3、业务层面引入繁琐（可以出额外的引入工具，简化业务中的UI组件引入）
Vue CLI 3
构建库
为了简化UI框架的webpack配置，这里将Vue CLI 3作为开发的容器引入，借用Vue CLI 3的功能（ 构建web-components-组件 功能应该更合适，这里没有进行验证），几乎可以做到UI组件构建的零配置。通过 能力，可以查看Vue CLI 3为我们预先设置的通用webpack配置（几乎可以满足大部分的UI组件构建）。
插件体系
这里使用Vue CLI 3的功能开发了几个插件，以便于快速构建起步的UI设计框架，具体的 preset.json 配置如下：
{ "useConfigFiles": true, "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框架的升级日志等。