Vue UI框架庫開發介紹

本文大家瞭解如何開發一個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、開發組件，組件代碼如下,例如，下面是一個帶顯示面板的搜索框，類似百度搜索框那樣：

<template>
  <div class="wstl-search">
    <input type="text" class="wstl-search-input" @focus="getFocus" @blur="focusOut" @input="inputChange" v-model="value">
    <div class="wstl-search-panel" v-if="panel && showPanel">
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="handleClick(item)">{{label ? item[label] : item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'wstl-search',
  props: {
    //是否開啓panel
    panel: {
      type: Boolean,
      default: false
    },
    //搜索面板展示內容
    list: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showPanel: false
    }
  },
  methods: {
    inputChange() {
      this.$emit('input', this.value);
    },
    getFocus() {
      this.showPanel = true;
    },
    focusOut() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.showPanel = false;
        });
      }, 200);
    },
    handleClick(item) {
      this.$emit('select', item);
    }
  }
}
</script>

<style lang="less" scoped>
.wstl-search{
  display: inline-block;
  position: relative;
  .wstl-search-input{
    display: inline-block;
    height: 100%
  }
  .wstl-search-panel{
    position: absolute;
    border: 1px solid #e3e3e3;
    box-sizing: border-box;
    width: 100%;
    ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      li {
        padding: 8px 10px;
        background: #fff;
        font-size: 14px;
        &:hover{
          background: #e3e3e3;
          cursor: pointer;
        }
      }
    }
  }
}
</style>

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

經過這三步，就可以使用剛剛開發的那個組件了。如下：

<wstl-search></wstl-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項目。

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