# 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>HButton</HButton>
```

```js
// main.ts全量导入
import 'graph-stage/style.css'
import graphStage from 'graph-stage'
app.use(graphStage)
// 使用
<HButton>HButton</HButton>
```