Vue UI框架库开发介绍

2次阅读

共计 3903 个字符，预计需要花费 10 分钟才能阅读完成。

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

// 定义注册函数，当 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 上留言。

正文完