@chase-shao/vue-component-lib

Vue Component Library

一个现代化的 Vue 3 组件库，使用 Vite 构建，支持 TypeScript 和 <script setup> 语法。

特性

• 🚀 Vite 驱动 - 极快的构建速度和开发体验
• ⚡ Vue 3 - 完全支持 Composition API 和 <script setup>
• 📦 TypeScript - 完整的类型支持
• 🎨 CSS 模块化 - 组件样式独立打包
• 📚 多格式输出 - ES、CJS、UMD 多种格式支持

安装

npm install vue-component-lib
# 或
pnpm add vue-component-lib
# 或
yarn add vue-component-lib

使用

作为 Vue 插件使用

import { createApp } from 'vue'
import MyPlugin from 'vue-component-lib'
import 'vue-component-lib/dist/index.css'

const app = createApp({})
app.use(MyPlugin)

单独导入组件

import { MyComponent } from 'vue-component-lib'
import 'vue-component-lib/dist/index.css'

开发

# 克隆项目
git clone https://github.com/your-username/vue-component-lib
cd vue-component-lib

# 安装依赖
pnpm install

# 开发模式（监听文件变化）
pnpm dev

# 构建
pnpm build

# 预览构建结果
pnpm preview

构建输出

• dist/index.es.js - ES 模块版本
• dist/index.cjs.js - CommonJS 版本
• dist/index.umd.js - UMD 版本（浏览器直接使用）
• dist/index.d.ts - TypeScript 类型声明
• dist/index.css - 组件样式

技术栈

• 构建工具: Vite
• 框架: Vue 3
• 语言: TypeScript
• 样式: CSS with Scoped Styles

许可证

MIT License

npm test builds the library, then tests it.

Variations

• babel — illustrates writing the source code in ES2015 and transpiling it for older environments with Babel
• buble — similar, but using Bublé which is a faster alternative with less configuration
• TypeScript — uses TypeScript for type-safe code and transpiling

License

MIT.