資訊專欄INFORMATION COLUMN
摘要：本文大家了解如何開發一個框架。偽組件化我們知道，組件化開發的目的是解耦功能，提高代碼復用率和開發效率，進而加快項目開發周期與產品發布速度。公司自有的庫一般不可能發布到倉庫。這樣我們就實現了插件的開發。主要就是利用這個特性開發的。
本文大家了解如何開發一個Vue UI框架。
Vue UI框架demo 源碼地址： https://github.com/xubaodian/... 。
平時在項目中，我們經常會使用Element UI，Bootstrap Vue等Vue UI庫協助開發，這些UI庫提供的常用組件可以使我們迅速開發出原型系統，極大地提升開發效率。
在開發的過程中，我相信很多人其實都被這兩個問題困擾。
1、偽組件化
我們知道，組件化開發的目的是解耦功能，提高代碼復用率和開發效率，進而加快項目開發周期與產品發布速度。如果我們僅僅是把頁面分成幾個部分，各自為政，這其實不是組件化開發。
因為在項目里，多個頁面之間大部分時候，能提取很多公共組件出來（文件上傳，搜索框，時間輸入，工具欄等等），如果這些組件每個開發人員都實現，無疑是浪費時間的。
2、項目間組件管理麻煩
假如我們新的項目需要大量用到其它項目已實現的組件，很多人會把其它項目的組件直接復制過來，這其實是不利于組件管理的，因為組件代碼在多個項目中都有，假如這個組件實現是有缺陷的，我們必須在多個項目中進行修改。如何這種問題經常存在，而且項目又多，給代碼管理帶來很多工作。
這些問題有什么好的解決辦法呢？
沒錯，就是開發一個自有的UI庫，很多人肯定有過這樣的想法。這即有利于前端的組件積累，也有利于組件復用和管理。
本文就介紹如何開發Vue UI庫。
開發Vue UI庫，有兩個問題是關鍵：
1、項目中如何調用引入的UI庫？
2、在項目中如何使用UI庫中的組件或常用方法？
針對這兩個問題，我解釋下實現思路。
1、項目中如何引入自有的UI庫？
我們平時引入Element UI，Bootstrap Vue等UI庫時，一般是使用npm直接安裝依賴即可。公司自有的UI庫一般不可能發布到npm倉庫。但是，npm可以直接將git倉庫上的項目，本地文件夾直接安裝到項目中，具體方式如下：
npm install git+https://github.com/xubaodian/Wstl-UI.git
這樣就可以把我們私有git倉庫上的UI庫作為依賴安裝到項目中了，至于SVN倉庫上的庫是否可以安裝，我沒試過，大家可以嘗試一下。
對于第一個問題，解決方案就出來了：
建立統一的UI組件庫，放在公司私有git倉庫上，將各個項目中可以抽象出來的組件都統一放在這里，項目中使用的話，直接通過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提供的插件開發技術。我已自己開發的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的插件開發技術，插件技術的官方教程地址如下：https://cn.vuejs.org/v2/guide... 。
解釋下如何使用，分為3個步驟。
1、開發組件，組件代碼如下,例如，下面是一個帶顯示面板的搜索框，類似百度搜索框那樣：
- {{label ? item[label] : item}}
2、添加注冊函數,加入該文件為index.js。
//引用組件
import Search from "./src/search";
//定義注冊函數，當Vue.use(Search)時，會調用該函數，在該函數內可以注冊組件，添加全局方法等等。
Search.install = function(Vue) {
//注冊組件，組件名即Search.name
Vue.component(Search.name, Search);
};
export default Search;
3、Vue中注冊組件
import Vue from "vue"; //引入上面定義注冊函數的index.js文件 import Search from "index.js"; //注冊組件庫 Vue.use(Search);
經過這三步，就可以使用剛剛開發的那個組件了。如下：
這就是我們剛剛開發的組件。
它的原理是什么呢？
這是Vue提供的一個很方面的功能，當我們調用Vue.use(Search)的時候，Vue會調用Search.install方法，該方法第一個參數是Vue構造器，由于我們在Search.install方法里執行了如下代碼：
Vue.component(Search.name, Search);
即我們調用Vue.use(Search)的時候，就注冊了Search組件，組件名是wstl-search。這樣我們就實現了插件的開發。
Element UI主要就是利用這個特性開發的。
UI庫demo的搭建過程挺麻煩的，不一一講解，我直接把我搭建好的demo地址發出來，需要的可以直接下載。
git地址： https://github.com/xubaodian/...
簡單解釋下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項目。
有什么疑問可以在給我留言，或發郵件給我，472784995@qq.com,或在github上留言。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100713.html
摘要：作為年最具潛力，乃至最具影響力的前端開源項目真的不為過。通過上的介紹，這個項目是偏右阿里的前端大牛和阿里的前端大牛主導，而且從中也不難看出有些部分是來自參與過的項目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的開源世界越發精彩，Vue的不斷壯大，Angular 2的發布，Amaze UI 3....
摘要：作為年最具潛力，乃至最具影響力的前端開源項目真的不為過。通過上的介紹，這個項目是偏右阿里的前端大牛和阿里的前端大牛主導，而且從中也不難看出有些部分是來自參與過的項目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的開源世界越發精彩，Vue的不斷壯大，Angular 2的發布，Amaze UI 3....
摘要：作為年最具潛力，乃至最具影響力的前端開源項目真的不為過。通過上的介紹，這個項目是偏右阿里的前端大牛和阿里的前端大牛主導，而且從中也不難看出有些部分是來自參與過的項目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的開源世界越發精彩，Vue的不斷壯大，Angular 2的發布，Amaze UI 3....
摘要：相信不少使用的開發者和公司都有定制一套屬于自己的組件庫的需求。針對這個問題，我搭建了一個專門用來構建的組件庫的開發框架，以節省搭建環境的勞動力，專心于組件庫的開發。首先我們嘗試了使用的方案，就是把組件庫直接作為項目的子模塊使用。 showImg(https://segmentfault.com/img/bVNais?w=1226&h=1159); 相信不少使用Vue的開發者和公司都有定...
閱讀 3241·2021-10-13 09:39
閱讀 2007·2021-09-27 13:36
閱讀 3069·2021-09-22 16:02
閱讀 2593·2021-09-10 10:51
閱讀 1574·2019-08-29 17:15
閱讀 1529·2019-08-29 16:14
閱讀 3495·2019-08-26 11:55
閱讀 2544·2019-08-26 11:50
