目前大多数UI框架设计的Webpack配置都比较复杂，比如Element、Ant Design Vue、Muse-UI等Vue组件库。比如Element，为了在业务层面实现两种导入形式(完全导入和按需导入)，抛出了一些utils、i18n等。这可以在业务级别上普遍使用，因此Webpack配置变得非常复杂。为了简化UI框架的设计难度，本文介绍了一个简单的UI框架设计。在此之前，简单介绍了Element的构建过程，以便与新的UI框架设计进行对比。

通用构件库的设计者将介绍形式设计成两种形式：完全介绍和按需介绍。完全引入的开发相对方便。对于一些大商家或者不特别注重包装量的商家，按需引入开发的粒度相对精细，可以减少商家的包装量。

设计好的UI框架实践项目Github地址为zi y2/Vue-cli3-lerna-UI，包括preset.json、自己设计的Vue CLI插件以及自己设计的一系列UI组件(与生成的UI框架示例略有不同)。如果你觉得整体结构不合理或者没有充分考虑，欢迎你提一个问题，这样我可以改进一下。如果你感兴趣，我希望你能在这里开始并感谢你！

元素

首先了解Element的构建过程，查看Element 2 . 7 . 0版本的package.json的npm脚本：

//其中` node build/bin/build-entry.js `生成Webpack build条目' build : file ' : ' node build/bin/iconit . js node build/bin/build-entry . js node build/bin/i18n . js node build/bin/version . js '，//build CSS style ' build : theme ' : ' node build/bin/gen-CSS file gulf build-gulf file packages/theme-粉笔/gulf file . jscp//清除构建文件夹‘lib’‘clean’:‘rim RAF lib rim RAF包/*/lib rim RAF test/* */coverage’。//整体构建' dist' :' NPM运行干净NPM运行构建：文件NPM运行lint web pack-config构建/webpack.conf.js web pack-config构建/web pack.common . js web pack-config构建/webpack.component.js npm运行构建：utils npm运行构建：umd npm运行构建：血红素'，//执行eslit check ' lint ' 3360 ' eslint src/* */* test/* */

npm运行距离

有许多与元素构造相关的npm脚本，但总体构造脚本是dist:

dist': 'npm运行clean npm运行build:file npm运行lint web pack-config build/web pack . conf . js web pack-config build/web pack.common . js web pack-config build/web pack.component . js NPM运行build:utils npm运行build:umd npm运行build:umd血红素'