# vue-ui-library
**Repository Path**: ysihang/vue-ui-library
## Basic Information
- **Project Name**: vue-ui-library
- **Description**: vue3 组件库开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-06
- **Last Updated**: 2023-11-07
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 包管理
新建packages文件夹，后续存放我们的各种包。
将包内项目分pnpm init ，可以理解 当前项目下包含的包项目。
> 例如 将子包名改为@vue-ui-library/xxx
## 包关联
当测试包引用ui时，如何关联：
根目录创建pnpm-workspace.yaml
## 环境配置
1 测试组件环境
采用 vite+ts 开发vue3组件库，测试库需要安装typescript、vue3，less 管理样式
```js
pnpm add vue@next typescript less -D -w
```
### 初始化 ts
```js
npx tsc --init
```
### 安装插件
```js
pnpm add vite @vitejs/plugin-vue -D
```
### 配置vite.config.ts
```js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});
```
### 创建index.html
```html
play
```
### app.vue
```html
启动测试
```
### 入口 main.ts
```ts
import { createApp } from "vue";
import App from "./app.vue";
const app = createApp(App);
app.mount("#app");
```
### ts 无法识别 .vue 的问题
```js
// vue-shim.d.ts
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const component = DefineComponent<{},{},any>
}
```
## 使用vite打包组件库
### 配置
```js
pnpm add vite @vitejs/plugin-vue -D -w
```