当前位置：首页 > VUE

vue实现组件库

2026-03-08 00:43:53VUE

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 工具自动化测试和发布流程。

vue实现组件库

# .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 }}