摘要：本文大家了解如何開發(fā)一個框架。偽組件化我們知道，組件化開發(fā)的目的是解耦功能，提高代碼復(fù)用率和開發(fā)效率，進而加快項目開發(fā)周期與產(chǎn)品發(fā)布速度。公司自有的庫一般不可能發(fā)布到倉庫。這樣我們就實現(xiàn)了插件的開發(fā)。主要就是利用這個特性開發(fā)的。

本文大家了解如何開發(fā)一個Vue UI框架。
Vue UI框架demo 源碼地址： https://github.com/xubaodian/... 。

平時在項目中，我們經(jīng)常會使用Element UI，Bootstrap Vue等Vue UI庫協(xié)助開發(fā)，這些UI庫提供的常用組件可以使我們迅速開發(fā)出原型系統(tǒng)，極大地提升開發(fā)效率。
在開發(fā)的過程中，我相信很多人其實都被這兩個問題困擾。

1、偽組件化
我們知道，組件化開發(fā)的目的是解耦功能，提高代碼復(fù)用率和開發(fā)效率，進而加快項目開發(fā)周期與產(chǎn)品發(fā)布速度。如果我們僅僅是把頁面分成幾個部分，各自為政，這其實不是組件化開發(fā)。
因為在項目里，多個頁面之間大部分時候，能提取很多公共組件出來（文件上傳，搜索框，時間輸入，工具欄等等），如果這些組件每個開發(fā)人員都實現(xiàn)，無疑是浪費時間的。

2、項目間組件管理麻煩
假如我們新的項目需要大量用到其它項目已實現(xiàn)的組件，很多人會把其它項目的組件直接復(fù)制過來，這其實是不利于組件管理的，因為組件代碼在多個項目中都有，假如這個組件實現(xiàn)是有缺陷的，我們必須在多個項目中進行修改。如何這種問題經(jīng)常存在，而且項目又多，給代碼管理帶來很多工作。

這些問題有什么好的解決辦法呢？

沒錯，就是開發(fā)一個自有的UI庫，很多人肯定有過這樣的想法。這即有利于前端的組件積累，也有利于組件復(fù)用和管理。
本文就介紹如何開發(fā)Vue UI庫。

開發(fā)Vue UI庫，有兩個問題是關(guān)鍵：

1、項目中如何調(diào)用引入的UI庫？

2、在項目中如何使用UI庫中的組件或常用方法？

針對這兩個問題，我解釋下實現(xiàn)思路。

1、項目中如何引入自有的UI庫？
我們平時引入Element UI，Bootstrap Vue等UI庫時，一般是使用npm直接安裝依賴即可。公司自有的UI庫一般不可能發(fā)布到npm倉庫。但是，npm可以直接將git倉庫上的項目，本地文件夾直接安裝到項目中，具體方式如下：

npm install git+https://github.com/xubaodian/Wstl-UI.git

這樣就可以把我們私有g(shù)it倉庫上的UI庫作為依賴安裝到項目中了，至于SVN倉庫上的庫是否可以安裝，我沒試過，大家可以嘗試一下。
對于第一個問題，解決方案就出來了：

建立統(tǒng)一的UI組件庫，放在公司私有g(shù)it倉庫上，將各個項目中可以抽象出來的組件都統(tǒng)一放在這里，項目中使用的話，直接通過npm 安裝即可

2、在項目中如何使用UI庫中的組件或常用方法？
在說解決方案之前，我們先看下Element UI如何在項目中使用的，代碼如下：

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";

Vue.use(ElementUI);

通過上述代碼，就可在項目中使用Element UI的組件了，這其實是使用了Vue提供的插件開發(fā)技術(shù)。我已自己開發(fā)的demo，來講解組件是如何注冊到Vue中的。
引用自己的demo，上述代碼就如下：

import Vue from "vue";
import App from "./App.vue";
//引入UI庫js文件，npm安裝的依賴，直接引入，指向文件在依賴項目的package.json定義的，該文件的main定義這個引用位置
import WsltUI from "wstl-ui";

//引用組件庫CSS文件
import "wstl-ui/lib/index.css";

//注冊組件庫
Vue.use(WsltUI);

demo的目錄如下：

這其實是利用了Vue的插件開發(fā)技術(shù)，插件技術(shù)的官方教程地址如下：https://cn.vuejs.org/v2/guide... 。
解釋下如何使用，分為3個步驟。

1、開發(fā)組件，組件代碼如下,例如，下面是一個帶顯示面板的搜索框，類似百度搜索框那樣：

2、添加注冊函數(shù),加入該文件為index.js。

//引用組件
import Search from "./src/search";

//定義注冊函數(shù)，當(dāng)Vue.use(Search)時，會調(diào)用該函數(shù)，在該函數(shù)內(nèi)可以注冊組件，添加全局方法等等。
Search.install = function(Vue) {
  //注冊組件，組件名即Search.name
  Vue.component(Search.name, Search);
};

export default Search;

3、Vue中注冊組件

import Vue from "vue";
//引入上面定義注冊函數(shù)的index.js文件
import Search from "index.js";

//注冊組件庫
Vue.use(Search);

經(jīng)過這三步，就可以使用剛剛開發(fā)的那個組件了。如下：

這就是我們剛剛開發(fā)的組件。

它的原理是什么呢？
這是Vue提供的一個很方面的功能，當(dāng)我們調(diào)用Vue.use(Search)的時候，Vue會調(diào)用Search.install方法，該方法第一個參數(shù)是Vue構(gòu)造器，由于我們在Search.install方法里執(zhí)行了如下代碼：

Vue.component(Search.name, Search);

即我們調(diào)用Vue.use(Search)的時候，就注冊了Search組件，組件名是wstl-search。這樣我們就實現(xiàn)了插件的開發(fā)。
Element UI主要就是利用這個特性開發(fā)的。

UI庫demo的搭建過程挺麻煩的，不一一講解，我直接把我搭建好的demo地址發(fā)出來，需要的可以直接下載。
git地址： https://github.com/xubaodian/...

簡單解釋下demo目錄文件。
packages文件夾是組件地址，packages/index.js是組件入口地址，所有組件都在install方法中注冊到Vue實例中。
config文件夾下是webpack配置，是我自己寫的，參考Vue官方腳手架的webpack配置，有些區(qū)別，在文件中都有注釋。
webpack.dev.js:啟動example的webpack配置，example用來測試組件
webpack.prod.js:生成example的生產(chǎn)環(huán)境文件的webpack配置
webpack.common.js:打包組件庫的webpack配置，所有組件生成一個js文件和一個css文件
webpack.component.js:分開打包組件的webpack配置，每個組件生成一個js文件和一個css文件

src文件夾下是測試組件的Vue項目。

有什么疑問可以在給我留言，或發(fā)郵件給我，[email protected],或在github上留言。