Pacvue 组件库

基于 Element Plus 二次封装的 Vue 3 组件库，支持按需加载。

特性

• 🎨 基于 Element Plus 二次封装
• 📦 支持按需加载
• 🔧 完整的 TypeScript 支持
• 🚀 基于 Vite 构建，开发体验优秀
• 📱 支持本地预览和打包

安装

前置要求

使用本组件库前，请确保已安装：

• Vue 3.x
• Element Plus 2.x

安装组件库

npm install pacvue-el-components element-plus vue
# 或
yarn add pacvue-el-components element-plus vue
# 或
pnpm add pacvue-el-components element-plus vue

注意：

• element-plus 和 vue 是必需的依赖，需要单独安装
• 在项目中需要配置 element-plus 的按需加载，详见 PROJECT_USAGE.md

使用

完整引入

import { createApp } from 'vue'
import Pacvue from 'pacvue'
import 'pacvue/style.css'

const app = createApp(App)
app.use(Pacvue)

按需引入

import { PacvueElButton, PacvueElSelect } from 'pacvue'
import 'pacvue/style.css'

组件示例

PacvueElButton

<template>
  <PacvueElButton type="primary" @click="handleClick">
    点击按钮
  </PacvueElButton>
</template>

<script setup lang="ts">
import { PacvueElButton } from 'pacvue'

const handleClick = () => {
  console.log('按钮被点击')
}
</script>

PacvueElSelect

<template>
  <PacvueElSelect v-model="value" placeholder="请选择">
    <el-option label="选项1" value="option1" />
    <el-option label="选项2" value="option2" />
  </PacvueElSelect>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PacvueElSelect } from 'pacvue'

const value = ref('')
</script>

开发

安装依赖

npm install
# 或
yarn install
# 或
pnpm install

本地预览

npm run dev

访问 http://localhost:3000 查看组件预览。

构建组件库

npm run build:lib

构建产物将输出到 dist 目录。

类型检查

npm run type-check

项目结构

.
├── src/                    # 组件库源码
│   ├── components/         # 组件目录
│   │   ├── button/         # PacvueElButton 组件
│   │   └── select/         # PacvueElSelect 组件
│   └── index.ts            # 入口文件
├── examples/               # 预览示例
│   ├── App.vue
│   ├── main.ts
│   └── index.html
├── dist/                   # 构建产物
├── package.json
├── tsconfig.json
└── vite.config.ts

组件列表

• PacvueElButton - 基于 el-button 的按钮组件
• PacvueElSelect - 基于 el-select 的选择器组件

技术栈

• Vue 3
• TypeScript
• Element Plus
• Vite
• Sass

注意事项

• ⚠️ 必需依赖：使用组件库前必须安装 element-plus@^2.0.0 和 vue@^3.0.0
• 📦 样式文件需要单独引入：import 'pacvue-el-components/style.css'
• 🔧 组件库支持按需加载，可以只引入需要的组件
• 📝 需要在项目中配置 element-plus 的按需加载和打包，详见 PROJECT_USAGE.md
• 📝 element-plus 作为 external 依赖，不会被打包到组件库中，详见 DEPENDENCIES.md

License

MIT