# vsyswin-ui
**Repository Path**: jxmlearner/vsyswin-ui
## Basic Information
- **Project Name**: vsyswin-ui
- **Description**: vue3+vite的简单组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-22
- **Last Updated**: 2026-02-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# vue3组件库的搭建
本次使用的`node`版本`v24.12.0`，不使用`typescript`
```bash
npm create vite@latest
项目名称：vsyswin-ui
```
## 改造项目结构
1. 将原来的src目录修改成examples
2. 将根目录里的index.html路径修改成 ``
3. 修改package.json文件，
1. private修改为false
2. 增加打包命令："build:lib": "vite build --mode lib"
3. 补充脚本命令和库模式的入口字段
# 一、核心配置思路
开发环境：将 Vite 的开发入口从默认的 src/main.js 改为 examples/main.js，保证项目能正常运行；
库模式打包：配置 packages 文件夹为组件库源码目录，打包输出为 UMD/ES 模块，支持按需引入和全局引入。
# 二、完整的 vite.config.js 配置
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
return {
// 1. 开发环境基础配置（适配examples目录）
plugins: [vue()],
// 配置别名（方便代码中路径引用）
resolve: {
alias: {
// 替换原来的@ -> src，改为@ -> examples
'@': resolve(__dirname, 'examples'),
// 新增组件库别名，方便examples中引入packages组件
'@packages': resolve(__dirname, 'packages')
},
// 可选：省略文件扩展名
extensions: ['.vue', '.js', '.jsx', '.ts', '.tsx']
},
// 开发服务器配置（可选，保持默认即可）
server: {
port: 3000,
open: true,
host: '0.0.0.0'
},
// 2. 库模式打包配置（用于组件库发布）
build: {
// 根据环境区分打包模式：开发环境打应用包，生产环境打库包
...(mode === 'lib' ? {
// 库模式核心配置
lib: {
// 组件库入口文件（需在packages下新建index.js作为入口）
entry: resolve(__dirname, 'packages/index.js'),
// 组件库名称（全局引入时的变量名，如 window.YourUI）
name: 'vsyswin-ui',
// 输出的包格式：umd（兼容浏览器/Node）、es（ES模块）
formats: ['umd', 'es'],
// 输出文件名（不同格式的文件名）
fileName: (format) => `vsyswin-ui.${format}.js`
},
// 打包时排除Vue依赖（避免重复打包，用户项目已安装Vue）
rollupOptions: {
external: ['vue'],
output: {
// 全局模式下为外部依赖提供全局变量
globals: {
vue: 'Vue'
},
// 输出目录（库模式打包到lib文件夹）
dir: resolve(__dirname, 'lib')
}
},
// 生成sourcemap（方便调试）
sourcemap: true,
// 清空输出目录
emptyOutDir: true
} : {
// 开发环境打包配置（examples应用）
outDir: resolve(__dirname, 'dist'),
emptyOutDir: true
})
}
}
})
```
# 三、配套目录结构与文件补充
1. 最终目录结构
```
vsyswin-ui/
├── examples/ // 原src目录，改为examples（开发调试用）
│ ├── main.js // 项目入口文件（开发环境入口）
│ ├── App.vue // 根组件
│ └── components/ // 调试用组件
├── packages/ // 组件库源码目录
│ ├── index.js // 组件库入口（需新建）
│ └── button/ // 示例组件（可自定义）
│ ├── index.vue // 组件源码
│ └── index.js // 组件导出
├── vite.config.js // 上述配置文件
├── package.json // 需修改scripts和main字段
└── index.html // 开发环境入口html（需修改script引用路径）
```
2. 修改 index.html（开发环境入口）
将原来的 src/main.js 改为 examples/main.js：
```html
组件库开发
```
3. 补充 packages/index.js（组件库入口）
用于统一导出所有组件，支持全局注册和按需引入：
```js
// 导入示例组件（以Button为例）
import YourButton from './button/index.vue'
// 组件列表
const components = [
YourButton
]
// 全局注册方法
const install = (app) => {
components.forEach(component => {
app.component(component.name, component)
})
}
// 导出单个组件（按需引入）
export { YourButton }
// 导出默认安装方法（全局引入）
export default {
install
}
```
4. 修改 package.json（关键）
补充脚本命令和库模式的入口字段：
```json
{
"name": "vsyswin-ui",
"version": "0.0.1",
"type": "module",
"scripts": {
// 开发环境运行（基于examples目录）
"dev": "vite",
// 开发环境打包（examples应用）
"build": "vite build",
// 库模式打包（packages组件库）
"build:lib": "vite build --mode lib",
"preview": "vite preview"
},
// 库模式的入口文件（npm包的主入口）
"main": "./lib/vsyswin-ui.umd.js",
// ES模块入口
"module": "./lib/vsyswin-ui.es.js",
"dependencies": {
"vue": "^3.4.21"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"vite": "^5.1.6"
}
}
```