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

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

了解 easyest 框架

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

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

如何使用

只需要在终端执行

js 复制代码

npm create easyest

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

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

复制代码

pnpm install

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

复制代码

npm install pnpm -g

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

arduino 复制代码

pnpm run easyest:dev

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

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

组件开发

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

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

lua 复制代码

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

组件调试

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

js 复制代码

<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 加两个字