Vue UI框架庫開發介紹

本文你們瞭解如何開發一個Vue UI框架。
Vue UI框架demo 源碼地址： https://github.com/xubaodian/... 。

平時在項目中，咱們常常會使用Element UI，Bootstrap Vue等Vue UI庫協助開發，這些UI庫提供的經常使用組件可使咱們迅速開發出原型系統，極大地提高開發效率。
在開發的過程當中，我相信不少人其實都被這兩個問題困擾。

一、僞組件化
咱們知道，組件化開發的目的是解耦功能，提升代碼複用率和開發效率，進而加快項目開發週期與產品發佈速度。若是咱們僅僅是把頁面分紅幾個部分，各自爲政，這其實不是組件化開發。
由於在項目裏，多個頁面之間大部分時候，能提取不少公共組件出來（文件上傳，搜索框，時間輸入，工具欄等等），若是這些組件每一個開發人員都實現，無疑是浪費時間的。

二、項目間組件管理麻煩
假如咱們新的項目須要大量用到其它項目已實現的組件，不少人會把其它項目的組件直接複製過來，這實際上是不利於組件管理的，由於組件代碼在多個項目中都有，假如這個組件實現是有缺陷的，咱們必須在多個項目中進行修改。如何這種問題常常存在，並且項目又多，給代碼管理帶來不少工做。

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

沒錯，就是開發一個自有的UI庫，不少人確定有過這樣的想法。這即有利於前端的組件積累，也有利於組件複用和管理。
本文就介紹如何開發Vue UI庫。

開發Vue UI庫，有兩個問題是關鍵：

一、項目中如何調用引入的UI庫？

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

針對這兩個問題，我解釋下實現思路。

一、項目中如何引入自有的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 安裝便可

二、在項目中如何使用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個步驟。

一、開發組件，組件代碼以下,例如，下面是一個帶顯示面板的搜索框，相似百度搜索框那樣：

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

二、添加註冊函數,加入該文件爲index.js。

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

//定義註冊函數，當Vue.use(Search)時，會調用該函數，在該函數內能夠註冊組件，添加全局方法等等。
Search.install = function(Vue) {
  //註冊組件，組件名即Search.name
  Vue.component(Search.name, Search);
};

export default Search;

三、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項目。有什麼疑問能夠在給我留言，或發郵件給我，472784995@qq.com,或在github上留言。