Vue-library-start,一个基于Vite的vue组件库开发模板

Vue-library-start

文档

概述

本项目是一个基于 Vite 和 pnpm 等工具搭建的快速组件库开发架构。借助 Vite 的高效开发服务器和构建能力,以及 pnpm 的高效依赖管理,能帮助开发者快速搭建和开发 Vue 组件库。

技术栈

  • Vite:现代前端构建工具,提供了快速的冷启动和热更新能力。
  • pnpm:快速、节省磁盘空间的包管理器,相比 npm 和 yarn 能更高效地管理依赖。
  • Vue:渐进式 JavaScript 框架,用于构建组件化的用户界面。

必须依赖

  • pnpm: 比 npm 和 yarn 更高效的包管理工具。
  • node >= 20: javascript 运行时环境。

安装步骤

bash 复制代码
# 克隆仓库
git clone https://github.com/yourusername/vue-library-start.git
cd vue-library-start

# 安装依赖
pnpm install

快速开始

引入组件

javascript 复制代码
// 全局引入
import { createApp } from 'vue';
import XLibrary from 'x-library';
import 'x-library/dist/style.css';

const app = createApp(App);
app.use(XLibrary);

// 按需引入
import { Avatar } from 'x-library';
import 'x-library/es/avatar/style/css';

使用示例

vue 复制代码
<template>
  <xAvatar src="https://example.com/avatar.jpg" alt="用户头像" />
</template>

<script setup>
import { Avatar as xAvatar } from 'x-library';
</script>

开发指南

启动开发环境

bash 复制代码
# 启动组件演示环境
pnpm play

# 启动文档站点
pnpm docs:dev

添加新组件

  1. src/ 目录下创建新组件文件夹(如 src/button
  2. 添加组件实现文件 index.tsx 和类型定义 interface.d.ts
  3. src/components.ts 中导入新开发组件
  4. 运行 pnpm run build:watch
  5. play/src/App.vue 中添加演示代码

构建与发布

构建组件库

bash 复制代码
# 构建所有格式 (ES Module, CommonJS, UMD)
pnpm build

# 监听文件变化,实时构建
pnpm build:watch

构建文档

bash 复制代码
pnpm docs:build

发布到 npm

bash 复制代码
# 确保已登录 npm
npm login

# 发布包
pnpm publish

代码质量

代码检查

bash 复制代码
# ESLint 检查
pnpm lint:eslint

# StyleLint 检查
pnpm lint:style

# 代码格式化
pnpm lint:format

类型检查

bash 复制代码
pnpm typecheck

项目结构

以下是项目的主要目录结构及各部分的作用:

  • /play:用于演示组件的使用场景。
  • /src :组件库的源代码目录。
    • /[component] :存放各个组件的源代码(如 /avatar)。
    • /_utils:存放工具函数的目录。
    • /components.ts:组件注册入口文件。
    • /index.ts:组件库打包入口。
  • /docs:组件库的文档目录,使用 VitePress 构建。
  • /resolver:解析器相关代码。
  • /vite.config.mts:Vite 开发环境配置。
  • /vite.config.dist.mts:组件库构建配置。

注意/typings 目录会在构建过程中自动生成,包含组件库的类型定义文件。

许可证

本项目采用 MIT 许可证 开源,详情请查看 LICENSE 文件。

相关推荐
_志哥_2 分钟前
解除有些网站不能复制的终极办法
前端·chrome
愚昧之山绝望之谷开悟之坡17 分钟前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_1726 分钟前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
golang学习记27 分钟前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽29 分钟前
flutter中 getx 的使用
前端
Jay丶1 小时前
聊聊入职新公司两个月,试用期没过这件事
前端·面试
ZTeam前端全栈进阶圈1 小时前
Vue新技巧:<style>标签里的 CSS 也能响应式!
前端
ღ_23331 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
摸着石头过河的石头1 小时前
JavaScript继承的多种实现方式详解
前端·javascript
ybb_ymm1 小时前
前端开发之ps基本使用
前端·css