一行命令教你快速搭建一个 Vue3 组件库

1,067 阅读4分钟

作为一个前端,相信很多小伙伴都想搭建一个属于自己的组件库。但是却又不知道从哪里入手,不知道如何搭建一个开发组件库的框架。别担心,本篇文章将教你如何快速搭建一个属于自己的 Vue3 组件库。

了解 easyest 框架

Easyest 是一个 Vue3 组件库开发环境框架,采用 Vite4+TypeScript 为技术栈,支持按需加载,单元测试,自动打包与发布等功能,可以让我们直接上手组件库的开发。

它是我去年开发的一个框架,如果你想了解这个框架是如何实现的也可以点击Vite+TypeScript 从零搭建 Vue3 组件库 查看完整教程,每一行代码都提现在了教程里面。当然,你也可以直接使用,直接一行命令就能拥有~

如何使用

只需要在终端执行

npm create easyest

根据提示输入项目名称,选择 easyest 模板,等待一会,就可以得到一个组件库开发框架 image.png

这里命名可以随意,我的就命名为 easyest,然后进入这个项目执行

pnpm install

初次安装用时可能比较长,同时注意这里用的是 pnpm,因为该框架采用的是基于 pnpm 的 Monorepo 项目。如果没安装 pnpm 可以全局安装一下

npm install pnpm -g

安装完成之后我们就可以启动我们的测试项目了,这里可以实时预览调试我们开发中的组件

pnpm run easyest:dev

启动完成就可以在浏览器中访问了 image.png

可以看到出现了两个按钮组件,下面我们来看下这些组件是如何开发的

组件开发

我们的组件库的包所在的位置是在packages/components下,每个组件都在 src 目录下,这里预设了两个组件buttonicon,后续开发其它组件都放在这个目录下即可

image.png

每个组件的目录如下,以 button 为例

-- components
  -- src
     -- button
        -- _tests_ 单元测试用例
        -- style 样式文件
        -- button.vue 组件主要逻辑
        -- index.ts 导出组件
     -- index.ts 导出全部组件
  -- index.ts 组件库入口文件

组件调试

刚刚启动的测试项目其实是在 play 下,我们来到play/app.vue

<template>
  <div>
    <ea-button>按钮</ea-button>
    <Button>123</Button>
  </div>
</template>
<script lang="ts" setup>
import { Button } from '@easyest/components';
</script>

可以从@easyest/components包中引入我们开发中的组件,这里是可以实时预览的,比如我们将 button.vue 加两个字

image.png

然后保存一下,浏览器上的 button 组件就能自动刷新

image.png

打包组件库

当我们组件开发完后就可以打包了

pnpm run build:easyest

项目打包后的文件地址是在packages/easyest下,也就是说我们最终要发布的就是这个文件 image.png

所以为了避免重名,可以到easyest/package.json中改一下包名,版本,作者,git 地址,改成你自己的即可 image.png

组件发布

发布之前你需要将项目关联一个 git 仓库,并且需要先进行提交到 git 仓库才能发布。同时 commit 之前也有一些规则校验,比如你需要按照下图所示规则提交

image.png

提交完成之后就可以发布组件库了,直接执行pnpm run publish:easyest

此时会有一些提示如选择如何提升版本,是否发布,是否加个 tag 等等

image.png

当然,如果你没有登录 npm 的话,会先让你登录 npm,所以这里需要你先注册 npm 账户。一切就绪不出意外的话就能发布成功了,发布成功之后直接在 vue3 项目中安装就能使用啦

写在最后

本篇文章只是教你如何使用这个框架,如果你想更深入的理解学习如何开发一个 vue3 组件库不妨看一下教程。里面包含很多内容如下 image.png

仓库地址(点个 Star 吧!): easyest

最后我在参与创作者打榜活动,点击这里 或者下方(pc 端)为我打榜!

你一票我一票,小月明天就出道!你不投我不投,小月何时能出头!