基于Vue的组件库开发实战

原创于 2025-06-11 08:15:32 发布 · 1.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #经验分享 #前端框架 #webpack #开发语言

文章目录

前言
一、功能需求
二、组件设计
三、代码开发
四、组件发布
五、测试使用
写在结尾

前言

在使用Vue框架开发前端项目时，虽然很多大厂都提供了相应的组件库，着实给小的们的“饭碗”填了把星星之火，咱们瞬间也就燎原了。但是林子大了，终究还是会有像咱这样的“刺头”，没事就想着搞个自己的组件库。于是。。。

文章以开发一个年度选择器控件为例，尝试分析Vue组件库的设计、开发、发布和使用测试的整个过程。

一、功能需求

年度选择器需求分析：

1、单选模式：最常见的使用场景，实际应用中很多人直接使用Combobox代替，但使用Combobox有一缺点就是年度选择项可能固定，到点只能通过更新系统来升级年度选择项，而这里设计的选择器年度选择项目是通过特定算法计算得出的，因此不存在这类问题。
2、连续多选：即年度范围选择，在统计同比或者环比数据时，我们可能需要选择连续的几个年度进行比较，这时我们就可以使用连续多选模式。
3、任意多选：任意年度集合选择，在统计同比或者环比数据时，我们可能需要选择指定的几个不连续的年度进行比较，这时任意多选即派上用场。

二、组件设计

通常选择器都由两部分组成：数据显示框和选择面板。因此需要根据需求中的几种模式分别设计这两部分的状态，如下图：
在这里插入图片描述
上面原型图中我们设计了年度选择器的不同使用场景下的不同呈现状态，接下来我们要将整个选择器各个部分拆解成相应子组件，以此来实现选择器的基本架构:

1、数据显示框

在这里插入图片描述
上图分析得知，数据显示框可总结为两种不同的形态。

2、选择面板

在这里插入图片描述
选择面板可由面板容器和年度选项表格组成，而年度选项表格又包含N个年度选项，因此我们设计开发的最小粒度就从年度选项开始。

3、选择项设计

在这里插入图片描述

三、代码开发

1、创建项目

新创建一个目录，目录名随意，用来放置我们的项目。在CMD命令提示符当前路径切换到新创建的目录下，输入命令：vue create <你的项目名>，如下图：

在这里插入图片描述
几番回车之后就可以创建vue项目，当然前提是您已经安装好了Node.js及Vue-Cli等工具。在vscode中打开新创建的Vue项目，在src目录下面创建plugins目录，用来存放我们开发的组件。

创建好的plugins目录结构成这样：

在这里插入图片描述

resource：存放静态资源文件，包含字体，样式，图像的文件；
utils：存放通用工具方法；
yearpicker：存放年度选择器源代码；
index.js：组件包导出安装主入口

2、选择项代码

创建好了项目，接下来我们从最小粒度“选择项”开始设计，在yearpicker目录中添加year-item.vue或者创建year-item目录，并在目录下创建index.vue，根据上面设计给组件添加布局如下：

在这里插入图片描述
根据设计我们知道选择项有几种状态：未选状态、选中状态、包含状态(连续选择时，只有开始年度和结束年度被选中，其它年度都属于包含状态)，因此样式中需要预置这几种状态，限于篇幅，这块大家可自行发挥。

图中mouseenter和mouseleave两个事件用来控制鼠标移入选择项和移出选择项时的样式，这里主要讲一下click事件，click事件实际上也很简单，主要做了两件事：1、更新选中状态；2、将选择项的数据通过change事件向上冒泡，如下：

在这里插入图片描述
其中itemData的定义如下：

在这里插入图片描述

value：选择项的年度值；
selected：选择状态；
passed：包含或者说经过状态；

3、选择项表格设计

这里把选择项表格拿出来单独设计主要是为了简化接下来面板的设计，因此选择项表格组件的主要工作就是把选择项按要求排列起来就好了。布局如下：

在这里插入图片描述
选择项要管理状态仅仅是自己一个点的状态，那么表格要管理的状态自然就成了面了。选择项表格需要管理当前呈现在用户面前的这一板年度项的状态。梳理以下选择项表格需要完成的工作，如下：

3.1、选择项的状态

在这里插入图片描述

初始化表格为当前年度开始的4X4矩阵的排列

3.2、选择项的change事件

检查他们的状态并继续向上冒泡当前选择的结果信息

在这里插入图片描述
在change事件中首先检查了选择项的选中状态，如果选中，就把它Push到选择结果列表中，否则要到结果列表中删除已存在，标识取消选择。

3.3、响应翻页事件

更新表格面板的选择项

在这里插入图片描述

next = 0 时，向前翻页
next = 1 时，向后翻页

4、面板容器设计

面板容器组件上面主要有，前后翻页按钮、当前面板年度区间显示、选择项表格组成。布局代码过多，这里就不上代码了，照着设计原型图设计，实际上也很简单。这里主要讲这句：

在这里插入图片描述
面板容器里面放置了选择项表格，主要负责设置选择模式、设置输入值、返回面板年度选择项区间变化和选择结果集变化。

在这里插入图片描述

选择项区间变化直接反映到面板显示

在这里插入图片描述
选择结果变化事件获得结果后先排序，之后将年度值提炼出来，通过change事件冒泡出去

5、数据显示框

依照原型设计，我们知道数据显示框实际上由两种不同情况：单编辑框模式和双编辑框模式，因此我们在布局时要分别做这两种模式的排版，视图中使用v-if、v-else判断选择模式来确定显示哪种模式的编辑框。

6、还有两个问题

6.1、如何触发显示选择面板

面板的装载使用Popper.js定位引擎将我们的面板组件加载或者析构释放。Popper.js的使用可另行百度，这里就不再赘述。

6.2、单选点击或者鼠标点击面板以外时，关闭选择面板

触发面板关闭可扩展Vue自定义指令实现，这里参考使用了ElementUI的clickoutside指令，关于自定义指令的使用可以在百度，网上这类文章太多，这里亦不赘述。

7、最后收尾

在Plugins\Yearpicker\Index.Js（无则新建）文件中添加如下代码：

在这里插入图片描述

四、组件发布

接下来就要将我们的组件库或者组件发布到NPM仓库供同学们使用了，发布的步骤如下：

1、首先需要在NPM官网注册一个账号，特别要记住账号名、密码、邮箱地址

地址：https://www.npmjs.com/

2、在vscode终端将当前目录定位到plugins，输入命令：npm init -y，如下图：

在这里插入图片描述
回车后会在plugins目录生成pagkage.json文件，内容如上图，name为插件的名称，这个名称不能与npm仓库中现有的组件库重名，因此使用之前需先到npm仓库查询一下，看名称有没有被使用。

查询地址：https://www.npmjs.com/search?q=<name>
其它参数如版本号、作者等信息看着办就好。

3、发布组件到仓库

发布组件之前需要先登录，因此继续在终端中输入命令：npm login，提示输入用户名、密码、邮箱信息，登录成功之后，继续输入命令：npm publish 即可将组件发布了。不出意外的话命令结束后您应该可以在您的Npm仓库中找到你的组件包。

五、测试使用

接下来怎么安装使用呢？

1、首先来安装，新建一个Vue项目，在vscode终端中输入 npm install <您的组件包名> –save

如：npm install sanmi-ui –save
安装完成后，可以在项目的package.json文件中看到我们安装的组件，如图：

在这里插入图片描述

2、引入组件，在项目的main.js中引入组件，如图：

在这里插入图片描述

3、在页面中放入组件，并定义好参数

在这里插入图片描述

4、运行结果

在这里插入图片描述

写在结尾

以上通过开发一款简单的组件讲述了Vue组件开发的全过程。
项目源代码地址：sanmi-ui-master