# soft-ui

**Repository Path**: sunhy-cn/soft-ui

## Basic Information

- **Project Name**: soft-ui
- **Description**: 一个Vue3前端组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-02
- **Last Updated**: 2023-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SoftUI

一个Vue3前端组件库

## 在线文档
[https://sunhy-cn.gitee.io/soft-ui](!https://sunhy-cn.gitee.io/soft-ui)

（可能会出现更新滞后）

## 通过Npm包引入

### 安装
```sh
# Choose a package manager you like.

# NPM
$ npm install soft-ui-vue3 --save

# Yarn
$ yarn add soft-ui-vue3

# pnpm
$ pnpm install soft-ui-vue3
```

### 引入项目
```js
// in main.js
import { createApp } from 'vue'
import SoftUI from 'soft-ui-vue3'
import 'soft-ui-vue3/lib/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(SoftUI)

app.mount('#app')
```

## 源码本地打包构建

> gitee地址：[sunhy/soft-ui](https://gitee.com/sunhy-cn/soft-ui)

1、获取仓库代码地址：https://gitee.com/sunhy-cn/soft-ui.git；  

2、下载至本地：

```shell
git clone https://gitee.com/sunhy-cn/soft-ui.git
```

3、安装依赖：

```shell
pnpm install
```

4、打包构建：
```
npm run lib
```

5、将构建出的lib文件内容复制到项目中直接引用，包括：
  
  - lib/global.d.ts // volar类型支持
  - lib/soft-ui.umd.js
  - lib/style.css

6、在main.ts文件中导入上述文件，或直接在项目index.html中使用标签`style`和`script`引入

## TypeScript类型支持

如果您使用 Volar，请在`tsconfig.json`中通过`compilerOptions.type`指定全局组件类型。
```json
// in tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["soft-ui-vue3/lib/global"]
  }
}
```