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 文件。

相关推荐
YGY Webgis糕手之路9 分钟前
Cesium 快速入门(八)Primitive(图元)系统深度解析
前端·经验分享·笔记·vue·web
懋学的前端攻城狮10 分钟前
从 UI = f(state) 到 Fiber 架构:解构 React 设计哲学的“第一性原理”
前端·react.js·前端框架
三原14 分钟前
6年前端学习Java Spring boot 要怎么学?
java·前端·javascript
yourkin66617 分钟前
Bean Post-Processor
java·开发语言·前端
前端小咸鱼一条40 分钟前
React中的this绑定
前端·javascript·react.js
影子信息1 小时前
vue vxe-table :edit-config=“editConfig“ 可以编辑的表格
前端·javascript·vue.js
YGY Webgis糕手之路1 小时前
Cesium 快速入门(四)相机控制完全指南
前端·经验分享·笔记·vue·web
JavaDog程序狗1 小时前
【软件环境】Windows安装NVM
前端·node.js
黑土豆1 小时前
为什么我要搞一个Markdown导入组件?说出来你可能不信...
前端·javascript·markdown
前端小巷子1 小时前
Vue 2 响应式系统
前端·vue.js·面试