various-ui/README.md

This is a test version of the Vue 3 component library

# **Various UI**

一个 Vue.js 3 的 UI 库 <br>

## **安装**

```
$ npm i --save various-ui
```

 <br>

## **使用（Vite）**

### 1. 安装 SVG 图标自动引入插件

#### 1.1 安装插件

```
$ npm i --save-dev vite-plugin-svg-icons
```

#### 1.2 配置插件（vite.config.ts）

```
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

export default (config) => {
    return {
        plugins: [
            createSvgIconsPlugin({
                // 指定需要缓存的图标文件夹
                iconDirs: [resolve(process.cwd(), "node_modules/various-ui/icons")],
                // 指定symbolId格式
                symbolId: "icon-[name]",
            }),
        ],
    };
}
```

#### 1.3 引入 SVG 图标（入口文件）

```
import "virtual:svg-icons-register";
```

<br>

### 2. Various UI 组件（全部引入）

```
import App from "./App.vue";
import VariousUI from 'various-ui'

import { createApp } from 'vue'

import 'various-ui/styles/index.css'; //* 组件库所有样式

const app = createApp(App)

app.use(VariousUI)
```

<br>

### 3. Various UI 组件（按需引入）

#### 3.1 安装样式自动引入插件

```
$ npm i --save-dev vite-plugin-svg-icons
```

#### 3.2 配置插件（vite.config.ts）

```

import { createStyleImportPlugin } from "vite-plugin-style-import";

export default (config) => {
    return {
        plugins: [
            createStyleImportPlugin({
                libs: [
                    {
                        libraryName: "various-ui",
                        esModule: true,
                        resolveStyle: (name) => {
                            const result = `various-ui/styles/${name.split("ui-").slice(-1)[0]}.css`;
                            if (existsSync(resolve(__dirname, "node_modules", result))) return result;
                            else {
                                return "";
                            }
                        },
                    },
                ],
            }),
        ],
    };
}
```

#### 3.3 按需引入组件

```
import App from "./App.vue";

import { UiIcon } from 'various-ui'
import { createApp } from 'vue'

import "various-ui/styles/normalize.css"; //* 组件库基础样式

const app = createApp(App)

app.component(UiIcon.name, UiIcon)
```