Vue組件庫demo git地址： https://github.com/xubaodian/Wstl-UI.git
現在絕大部分公司都已經採用組件化的方式進行web開發，無論是使用Vue，還是使用React等等，基本的開發步驟如下：
1、需求論證，討論出項目基本需求。
2、交互設計，ui設計，接口設計。這個階段把業務模型確定下來，UI基本確定，與後臺約定接口形式。
3、構建前端項目，基於Vue或React等等，根據交互和UI設計進行任務分工，不同人員開發不同的頁面。
4、每個web開發人員拿到任務後，首先把頁面劃分成組件，然後進行開發，如何用到其它項目組件，直接複製過來。
5、組件合併起來組成頁面進行聯調，並最終打包前端頁面。
有相當一大部分公司或項目開發方式都是如此，這麼開發其實有兩個弊端，十分明顯。
1、僞組件化
我們知道，組件化開發的目的是解耦功能，提高代碼複用率和開發效率，進而加快項目開發週期與產品發佈速度。如果我們僅僅是把頁面分成幾個部分，各自爲政，這其實不是組件化開發。
因爲在項目裏，多個頁面之間大部分時候，能提取很多公共組件出來（文件上傳，搜索框，時間輸入，工具欄等等），如果這些組件每個開發人員都實現，無疑是浪費時間的。
2、項目間組件管理麻煩
假如我們新的項目需要大量用到其它項目已實現的組件，很多人會把其它項目的組件直接複製過來，這其實是不利於組件管理的，因爲組件代碼在多個項目中都有，假如這個組件實現是有缺陷的，我們必須在多個項目中進行修改。如何這種問題經常存在，而且項目又多，給代碼管理帶來很多工作。
這些問題有什麼好的解決辦法呢？
針對問題1，要求web開發人員多做溝通，對業務進行抽象，儘可能把項目中可能複用的組件抽象出來(文件上傳，搜索框，時間輸入，工具欄等等)，單獨開發，應用到各個頁面中。這樣問題1就解決了。
針對問題2，有什麼好的方案呢？
我們應該注意到平時引用其它組件或框架時，一般都是npm直接安裝到項目中，然後使用。我們如果也能建立自己的組件庫，通過npm安裝到項目中就好了。
npm除了可安裝哪些東西呢？
1、npm官方倉庫的上庫，插件等。
2、git倉庫上的前端庫。
3、本地的文件夾。
對於2，3兩種情況，文件夾或庫必須符合npm的一些標準，具體不細說，可以去npm官方網站上查看。簡單來說，用npm init初始化的項目，都可以用npm安裝，main的執行文件就是後續import引用的默認文件。
那麼問題2的解決辦法也就出來了：
建立公共組件庫，放到公司私有git倉庫上。然後通過npm安裝到各個項目中使用。
注意：如果沒有私有git倉庫,代碼又不能放到網上git倉庫，可以用如下方法解決，代碼放到svn上，然後下載到本地，再通過npm把本地文件夾安裝到項目中去。
解決方案已經說了，下面說下具體實現吧，下面的組件庫是基於Vue插件實現的。
首先說下Vue插件的開發和使用。
我們使用插件的方法如下：
//導入插件
import MyPlugin from ...;
//註冊插件
Vue.use(MyPlugin)
//然後就可以項目中使用該插件了
new Vue({
//... options
})
以Vue官方路由插件Vue-Router來說：
import Vue from 'vue';
import VueRouter from 'vue-router';
// 註冊路由
Vue.use(VueRouter)
這樣就可以在項目中使用Vue路由了。
插件的註冊原理是什麼呢？
Vue.use註冊插件的時候，會調用插件的install方法，該方法的第一參數是Vue構造器，插件可以通過install方法，將插件，函數，組建等等註冊到Vue構造器上。代碼如下：
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或屬性
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 2. 添加全局資源命令
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 3. 注入組件
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
//或通過下面方法注入組建，name是組件名，component是組件實例
Vue.component(name, component);
// 4. 添加實例原型方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
}
通過以上方法，我們可以給Vue實例添加自定義命令，原型方法，注入組建，添加全局方法等等。
我們可以新建Vue項目，作爲組件庫放到git倉庫上，然後通過npm安裝到其它項目中。
組件庫的搭建過程挺麻煩，不一一講解，我直接把我搭建好的demo地址發出來，需要的可以直接下載：git地址： https://github.com/xubaodian/Wstl-UI.git
簡單解釋下demo：
packages文件夾是組件地址，packages/index.js是組件入口地址，所有組件都在install方法中註冊到Vue實例中。
config文件夾下是webpack配置，是我自己寫的，參考Vue官方腳手架的webpack配置，有些區別，在文件中都有註釋。
webpack.dev.js:啓動example的webpack配置，example用來測試組件
webpack.prod.js:生成example的生產環境文件的webpack配置
webpack.common.js:打包組件庫的webpack配置，所有組件生成一個js文件和一個css文件
webpack.component.js:分開打包組件的webpack配置，每個組件生成一個js文件和一個css文件
src文件夾下是測試組件的Vue項目。
有什麼疑問可以在給我留言，或發郵件給我，[email protected],或在github上留言。