2017年是Vue.js大爆发的一年，React迎来了一个强有力的竞争对手，王者地位受到挑战（撰写此文时github上Vue与React的star数量已逼近）。我们团队这一年有十多个大型项目采用了Vue技术栈，在开发效率、页面性能、可维护性等方面都有不错的收效。 我们希望把这些项目中可复用的功能组件提取出来，给后续项目使用，以减少重复开发，提高效率，同时也为了致敬前端界“出一个框架，造一遍轮子”的行规， 一个基于Vue 2的移动端UI组件库被提上日程。
组件库的开发过程总的来说还是比较顺利的，这里与大家分享一些问题与思考。
脚手架选择
尽管我们团队的这些Vue技术栈项目的脚手架大都使用的是webpack，在为组件库选择脚手架的时候我们还是在webpack与Rollup中犹豫了一下。
Rollup看起来更适合组件库的开发，它把所有模块构建在一个函数内，执行效率更高，它支持Tree Shaking，只打包需要的代码，输出文件更小（webpack后来也支持了）。但综合考虑之后，我们还是选择了webpack作为打包工具。首先，按照规划，demo演示和文档页面也在这个脚手架中，所以对代码分割、热加载等功能是有需求的，而这方面能力Rollup远不及webpack。另外，这个组件库由多人开发维护，基于现有webpack脚手架开发成本更低、效率更高。选择webpack，让我们可以更专注于造轮子。
打包
即便选择了webpack作为打包工具，我们也并不希望这个库的使用场景局限在webpack项目中，通过AMD/CMD方式、甚至通过script标签直接引用等场景都应该得到支持。为了达到这个目的，我们需要在webpack配置文件中设置输出格式，需要配置的选项是output.libraryTarget，有以下可选值：
“var”（默认值）输出为一个变量
var MyLibrary = _entry_return_ ;
“this” 输出为this的一个属性
this["MyLibrary"] = _entry_return_ ;
“window” 输出为window对象的一个属性
window["MyLibrary"] = _entry_return_ ;
“global” 输出为global对象的一个属性
global["MyLibrary"] = _entry_return_ ;
“commonjs” 输出为exports 的一个属性
exports["MyLibrary"] = _entry_return_ ;
“commonjs2” 以module.exports形式输出
module.exports = _entry_return_ ;
“amd” 输出为AMD模块
“umd” 暴露给所有模块定义，允许它和CommonJS/AMD/全局变量一起工作
很显然，我们需要把output.libraryTarget的值设为“umd”，以使我们的库可以工作在各种场景下。
另一个与库打包有关的设置项是output.umdNamedDefine，在output.libraryTarget 设为umd，且output.library 也设置了的情况下，把此选项值设为true，将会为AMD模块命名。
webpackConfig.output = { path: path.resolve(__dirname, 'dist'), publicPath:"https://www.jb51.net/", filename: '[name].js', library: 'xxx', //模块名称 libraryTarget: 'umd', //输出格式 umdNamedDefine: true //是否把模块名作为AMD输出的命名空间 };
Vue组件库只提供组件，Vue文件自身需要组件库使用者在项目中自行引入，库中无需打包。所以我们可以把Vue加到externals中。
externals: { vue: 'vue' }
这样Vue就不会被打包。不过，有个问题，就是用script标签的形式引用Vue的时候，挂在window上的变量名是“Vue”，而不是我们需要的”vue”，因此使用时会报vue未定义的错误。
还好，webpack的externals配置项支持传入一个对象，可以为不同导出形式指定不同名称。所以下面这种写法可以解决这个问题。
组件类型
规划中的Vue组件库包含组件（Component）、指令（Directive）和过滤器（Filter）三种类型的存在。
比较特殊的是模态弹窗类（Modal）组件，如Dialog、Toast等等。页面中可能存在很多个Modal，而很多场景下用户的行为只会触发其中一部分，如果把所有可能弹出的Modal（特别是异步的、结构内容复杂的Modal）全部写在页面上，是否妥当？对于多页面应用，每个页面都写一遍或者再封装一层组件是否繁琐而冗余？这个问题在知乎上引发过讨论，尤大（Vue.js作者尤雨溪）本人在参与讨论时给出建议，组件多层嵌套时，应该把Modal放在根组件里，然后在子组件里通过事件触发。在具体应用里，应该这么用，这符合Vue提倡的“状态驱动”。不过在组件库里，我们还是希望提供一种更便捷更通用的方式来使用Modal类型的组件。
参考了Element UI等优秀组件库的做法，我们把Modal类型的组件挂到了Vue.prototype上，使之成为Vue的实例方法，一次安装、全局调用。
this.$dialog(options);
因此，我们的组件库组件类型还包括“实例方法”。
组件CSS作用域