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