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上留言。