【脚手架创建 Vue3 公共组件库】

脚手架创建 Vue3 公共组件库

创建一个支持 Vue2 和 Vue3 的公共组件库需要配置多版本兼容的脚手架，并通过分包构建实现按需加载。以下是具体实现方法：

初始化项目结构

使用 Vue CLI 或 Vite 初始化项目，目录结构需区分 Vue2 和 Vue3 版本：

复制代码

my-component-lib/
├── packages/          # 多版本组件目录
│   ├── vue2/          # Vue2 组件
│   │   ├── src/
│   │   └── package.json
│   └── vue3/          # Vue3 组件
│       ├── src/
│       └── package.json
├── build/             # 构建配置
├── node_modules/
└── package.json

配置多版本构建

1. 修改根目录 package.json

json 复制代码

{
  "scripts": {
    "build:vue2": "cd packages/vue2 && npm run build",
    "build:vue3": "cd packages/vue3 && npm run build",
    "build": "npm run build:vue2 && npm run build:vue3"
  }
}

2. Vue2 组件配置（packages/vue2/package.json）

json 复制代码

{
  "name": "@my-lib/vue2",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "peerDependencies": {
    "vue": "^2.6.0"
  }
}

3. Vue3 组件配置（packages/vue3/package.json）

json 复制代码

{
  "name": "@my-lib/vue3",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "peerDependencies": {
    "vue": "^3.0.0"
  }
}

实现组件兼容性

Vue2 组件示例（packages/vue2/src/Button.vue）

vue 复制代码

<template>
  <button class="vue2-btn">{{ text }}</button>
</template>

<script>
export default {
  props: ['text']
}
</script>

Vue3 组件示例（packages/vue3/src/Button.vue）

vue 复制代码

<template>
  <button class="vue3-btn">{{ text }}</button>
</template>

<script setup>
defineProps(['text'])
</script>

配置 Rollup/Vite 打包

Vue2 的 vite.config.js

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'MyLibVue2',
      fileName: 'index'
    },
    rollupOptions: {
      external: ['vue']
    }
  }
})

Vue3 的 vite.config.js

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'MyLibVue3',
      fileName: 'index'
    },
    rollupOptions: {
      external: ['vue']
    }
  }
})

发布到 npm

bash 复制代码

npm login

bash 复制代码

cd packages/vue2 && npm publish --access public
cd ../vue3 && npm publish --access public

使用组件库

Vue2 项目安装：

bash 复制代码

npm install @my-lib/vue2

Vue3 项目安装：

bash 复制代码

npm install @my-lib/vue3

全局注册示例（Vue3）：

javascript 复制代码

import { createApp } from 'vue'
import MyLib from '@my-lib/vue3'

createApp(App).use(MyLib).mount('#app')

注意事项

通过 peerDependencies 声明 Vue 版本依赖，避免重复打包
构建时需分离 CSS 文件以便按需加载
推荐使用 unplugin-vue-components 实现自动按需导入
版本更新时需同步修改两个子包的版本号