vue实现组件库
Vue 组件库的实现步骤
项目初始化
使用 Vue CLI 或 Vite 初始化一个 Vue 3 项目。确保项目结构清晰，适合组件库开发。
npm create vue@latest my-component-library
cd my-component-library
npm install组件设计与开发
在 src/components 目录下创建组件，每个组件应包含单独的 .vue 文件、样式和文档。组件应遵循单一职责原则。
<template>
<button class="my-button">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'MyButton',
props: {
type: {
type: String,
default: 'primary'
}
}
}
</script>
<style scoped>
.my-button {
padding: 8px 16px;
border-radius: 4px;
}
</style>组件全局注册
创建入口文件（如 src/index.js），用于全局注册组件并导出。
import MyButton from './components/MyButton.vue'
const components = {
MyButton
}
export default {
install(app) {
for (const key in components) {
app.component(key, components[key])
}
}
}打包配置
使用 Vite 或 Rollup 配置打包，生成 UMD 和 ES 模块格式。
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: 'src/index.js',
name: 'MyComponentLibrary',
fileName: 'my-component-library'
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue'
}
}
}
}
})文档与示例
使用 VuePress 或 Storybook 创建组件文档和示例。
npm install -D vuepress
mkdir docs在 docs/README.md 中添加组件使用说明：
# MyButton
A simple button component.
```vue
<template>
<MyButton>Click me</MyButton>
</template>
<script>
import { MyButton } from 'my-component-library'
export default {
components: { MyButton }
}
</script>发布到 npm
更新 package.json 配置后发布到 npm。
{
"name": "my-component-library",
"version": "1.0.0",
"main": "dist/my-component-library.umd.js",
"module": "dist/my-component-library.es.js",
"files": ["dist"],
"peerDependencies": {
"vue": "^3.0.0"
}
}执行发布命令：
npm publish版本管理与更新
遵循语义化版本控制（SemVer），使用 npm version 管理版本号。
npm version patch
npm publish持续集成
配置 GitHub Actions 或 CI 工具自动化测试和发布流程。
# .github/workflows/publish.yml
name: Publish
on: push
jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm install
- run: npm run build
- run: npm publish
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
