浅浅目前只有一万年的修为，如果有不合理的地方欢迎抛出来哦，我保证不打你～～～
前段时间一直在研究组件库，终于在组内派上了大用场。来给大家贡献一篇关于移动端组件库的东西。如果你已经开发过公司级别的开源组件库了，那就可以不看了。毕竟逼格还是没有那么高。吼吼～～～
回想一下，在你们公司或者你们小组是否有一个以上的项目需要你维护？你是否遇到了两个项目需要开发类似的功能的情况？那么你是怎么做的呢？
有这么三种通俗的解决方案：
1）你可能会说我讲究速度，复制之前的组件到新项目中（如果之前没抽出组件那你可能得反思一下了），那么慢慢的你会发现随着你的项目的增加代码量在成倍上升。当你发现有一处问题的时候发现还需要修改其他项目的。
2）我可以抽离出所有公共的组件添加一个子模块（git submodule），这种方式虽然解决了重复工作，但对目录结构以及使用者的要求比较多
3）使用开源组件库。哎呦，一用才发现很多并不是我们想要的。。。尤其是移动端组件库
为什么呢？移动端组件库有什么特别之处吗？
1.UI风格差异较大
2.不同终端的适配方案不同rem/px/vw
那我们就自己简单实现一个吧～～～
接下来我按照两个思路来说：
先说明一下目录
-src
components
-btn...
-index.js
-package.json
1.把公共组件放入components目录中
//src/index.js
import Loading from './components/loading'
import Btn from './components/btn'
import Swipe from './components/swipe'
import Popup from './components/popup'
const install = function(Vue) {
if (install.installed) return;
Vue.component(Loading.name, Loading) // 此处注意：组件中需要添加name属性，代表注册的组件名。
Vue.component(Btn.name, Btn)
Vue.component(Swipe.name, Swipe)
Vue.component(Popup.name, Popup)
}
// auto install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
};
module.exports = {
install,
Loading,
Btn,
Swipe,
Popup
}
2.在package.json中添加：
"main": "src/index.js"
"name": "vue-ui-lib"
到此一个简单的组件库就可以用到项目中了。然后publish到公司的私服，试试～～
3.引用
npm i vue-ui-lib --register 私服地址
import UiLib from 'vue-ui-lib' Vue.use(UiLib)
// 直接使用
<btn ...></btn>
这样虽然通了，是不是感觉自己很棒了。可是我要修改组件，测试组件效果怎么办？
很明显，需要一个demo做测试。
4.创建demo
-demo
-btn
-swipe
...
-app.vue
-index.js
// demo/index.js
import UiLib from '../src/index' Vue.use(UiLib)
// 路由 （不细说啦，大家都懂滴）
然后你的测试也能跑通了。很棒～可是，我想按需引入文件怎么办呢？而且我产出的代码不是打包好的，而是源文件。这就需要掌握webpack的一部分啦。太晚了，明天晚上前一定写好～～～
5.webpack配置部分