Vue UI框架库开发介绍

ChaplinNoah 发布于1年前

本文大家了解如何开发一个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项目。

有什么疑问可以在给我留言,或发邮件给我,472784995@qq.com,或在github上留言。

查看原文: Vue UI框架库开发介绍

  • silverlion
  • smallmeercat
  • purplegorilla
  • tinygorilla