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

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

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

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

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

這些問(wèn)題有什么好的解決辦法呢？

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

開(kāi)發(fā)Vue UI庫(kù)，有兩個(gè)問(wèn)題是關(guān)鍵：

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

2、在項(xiàng)目中如何使用UI庫(kù)中的組件或常用方法？

針對(duì)這兩個(gè)問(wèn)題，我解釋下實(shí)現(xiàn)思路。

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

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

這樣就可以把我們私有g(shù)it倉(cāng)庫(kù)上的UI庫(kù)作為依賴安裝到項(xiàng)目中了，至于SVN倉(cāng)庫(kù)上的庫(kù)是否可以安裝，我沒(méi)試過(guò)，大家可以嘗試一下。
對(duì)于第一個(gè)問(wèn)題，解決方案就出來(lái)了：

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

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

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);

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

import Vue from "vue";
import App from "./App.vue";
//引入U(xiǎn)I庫(kù)js文件，npm安裝的依賴，直接引入，指向文件在依賴項(xiàng)目的package.json定義的，該文件的main定義這個(gè)引用位置
import WsltUI from "wstl-ui";

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

//注冊(cè)組件庫(kù)
Vue.use(WsltUI);

demo的目錄如下：

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

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

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

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

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

export default Search;

3、Vue中注冊(cè)組件

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

//注冊(cè)組件庫(kù)
Vue.use(Search);

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

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

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

Vue.component(Search.name, Search);

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

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

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

src文件夾下是測(cè)試組件的Vue項(xiàng)目。

有什么疑問(wèn)可以在給我留言，或發(fā)郵件給我，472784995@qq.com,或在github上留言。