Vue UI框架库开发介绍

liangdas 发布于2019-08-23 14:30 / 2991人阅读

摘要：本文大家了解如何开发一个框架。伪组件化我们知道，组件化开发的目的是解耦功能，提高代码复用率和开发效率，进而加快项目开发周期与产品发布速度。公司自有的库一般不可能发布到仓库。这样我们就实现了插件的开发。主要就是利用这个特性开发的。

本文大家了解如何开发一个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、开发组件，组件代码如下,例如，下面是一个带显示面板的搜索框，类似百度搜索框那样：

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

经过这三步，就可以使用刚刚开发的那个组件了。如下：

这就是我们刚刚开发的组件。

它的原理是什么呢？
这是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上留言。

私有云混合云 UI库 ui库编程 ui前端框架前端ui框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100713.html

2016年最具潜力前端开源项目Top20

摘要：作为年最具潜力，乃至最具影响力的前端开源项目真的不为过。通过上的介绍，这个项目是偏右阿里的前端大牛和阿里的前端大牛主导，而且从中也不难看出有些部分是来自参与过的项目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的开源世界越发精彩，Vue的不断壮大，Angular 2的发布，Amaze UI 3....

winterdawn 2019-08-30 13:21 评论0 收藏0
2016年最具潜力前端开源项目Top20

摘要：作为年最具潜力，乃至最具影响力的前端开源项目真的不为过。通过上的介绍，这个项目是偏右阿里的前端大牛和阿里的前端大牛主导，而且从中也不难看出有些部分是来自参与过的项目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的开源世界越发精彩，Vue的不断壮大，Angular 2的发布，Amaze UI 3....

xiguadada 2019-08-20 13:39 评论0 收藏0
2016年最具潜力前端开源项目Top20

摘要：作为年最具潜力，乃至最具影响力的前端开源项目真的不为过。通过上的介绍，这个项目是偏右阿里的前端大牛和阿里的前端大牛主导，而且从中也不难看出有些部分是来自参与过的项目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的开源世界越发精彩，Vue的不断壮大，Angular 2的发布，Amaze UI 3....

Caizhenhao 2019-08-01 16:10 评论0 收藏0
Vue-Donut——专用于构建Vue的UI组件库的开发框架

摘要：相信不少使用的开发者和公司都有定制一套属于自己的组件库的需求。针对这个问题，我搭建了一个专门用来构建的组件库的开发框架，以节省搭建环境的劳动力，专心于组件库的开发。首先我们尝试了使用的方案，就是把组件库直接作为项目的子模块使用。 showImg(https://segmentfault.com/img/bVNais?w=1226&h=1159); 相信不少使用Vue的开发者和公司都有定...

stormgens 2019-08-20 16:19 评论0 收藏0