Various UI

一个 Vue.js 3 的 UI 库

安装

$ npm i --save various-ui

使用（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";

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)

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)