# v-element-plus

**Repository Path**: gaoning99/v-element-plus

## Basic Information

- **Project Name**: v-element-plus
- **Description**: 二次封装了elementPlus组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-08
- **Last Updated**: 2026-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# v-element

基于 Vue 3、Vite 和 Element Plus 的自建组件库项目。

## 组件开发流程

1. 在 `src/components` 目录下编写组件。
2. 将 `src/components` 中的组件内容复制到根目录的 `packages` 目录下，作为组件库打包源码。
3. 执行组件库打包命令：

   ```bash
   npm run lib
   ```

   打包完成后，组件库产物会生成在 `lib` 目录中。

4. 在 `src/main.ts` 中引入组件库产物：

   ```ts
   import components from '../lib/m-element-components.es.js'
   import '../lib/v-element.css'
   ```

5. 使用 `app.use(components)` 注册组件库：

   ```ts
   const app = createApp(App)

   app.use(router)
   app.use(components)
   app.mount('#app')
   ```

完成注册后，组件库中的组件即可在项目中使用。

## 常用命令

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 类型检查并构建演示应用
npm run build

# 构建组件库
npm run lib
```

## 目录说明

```text
src/components/    组件开发目录
packages/          组件库打包源码目录
command/build.js   组件库构建脚本
lib/               组件库构建产物
src/main.ts        组件库引入和注册入口
```

## 已提供组件

- `m-form`：表单组件。
- `m-img-and-video`：图片和视频上传组件。

详细用法请查看对应组件目录下的 README 文档。