# viteLib
**Repository Path**: staion/viteLib
## Basic Information
- **Project Name**: viteLib
- **Description**: 2025年1月
vite+ts+vue3 项目开发,遇到需要把页面导出为私有库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-17
- **Last Updated**: 2025-01-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: vue3, vite
## README
#### Description
2025年1月
vite+ts+vue3 项目开发,需求把已有页面导出为私有库
#### 库模式开发
```js
1.lib文件夹创建对应的组件文件夹,包括.vue和index.ts文件
2.修改对应的index.ts文件路径
3.lib/main.ts导入对应的组件
4.pnpm build:lib打包为库
// 组件测试
// import {HButton} from '../lib/main'
// 打包后测试组件
import '../distLib/style.css'
import { HButton } from '../distLib/graph-stage.es.js'
app.use(HButton)
5.修改package.json版本号,执行npm publish推送到库
```
#### 库模式使用手册
```js
// 安装
pnpm install graph-stage
```
```js
// main.ts按需导入
import 'graph-stage/style.css'
import { HButton, ThreeDemo } from 'graph-stage'
app.use(HButton)
// 使用
HButton
```
```js
// main.ts全量导入
import 'graph-stage/style.css'
import graphStage from 'graph-stage'
app.use(graphStage)
// 使用
HButton
```