Uno vui

警告!

uno-vui目前还在积极开发中，还不能用于生产环境

简介

uno-vui是基于Unocss和Vueuse开发的vue3 UI组件库。组件库使用最新的Vue3 setup script, 完全使用Typescript来编写,并使用Vite进行打包和构建。

安装

@unocss/reset包含style样式预设。更多信息
@iconify/json是图标库, 你也可以使用cdn的方式加载图标, Unocss推荐的cdn有两个 https://esm.sh/和https://cdn.skypack.dev/，在国内使用cdn不太稳定, 推荐使用安装的方式。更多信息

pnpmyarnnpm

shell

pnpm add uno-vui @unocss/reset @vueuse/core
pnpm add unocss @iconify/json -D

shell

yarn add uno-vui @unocss/reset @vueuse/core
yarn add unocss @iconify/json -D

shell

npm install uno-vui @unocss/reset @vueuse/core
npm install unocss @iconify/json -D

配置

推荐使用vite.config.ts + uno.config.ts的配置方式，详细

vite.config.tsuno.config.ts

// vite.config.ts
import Unocss from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    Unocss(),
  ]
})

// uno.config.ts
import { presetUnoVui } from 'uno-vui/preset';
import { TransformerAttributifyToClass, unovuiIconsOptions } from 'uno-vui/utils';
import {
  defineConfig,
  presetAttributify, presetIcons, presetUno,
  transformerDirectives, transformerVariantGroup
} from 'unocss';

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(unovuiIconsOptions({
      svgPath: "src/assets/svgs"
    })),
    presetUnoVui({
      themes: [
        { primary: "blue", accent: "purple" },
        { primary: "pink", accent: "sky" },
      ],
      // 通过预设覆盖uno-vui默认使用图标
      // icons: {
      //   loading: "i-mingcute:loading-line animate-spin"
      // }
    })
  ],
  transformers: [
    TransformerAttributifyToClass(), // 必须放在第一个
    transformerVariantGroup(),
    transformerDirectives(),
  ],
  // 添加这里恨重要，unocss默认不扫描node_modules文件夹下的.js,.cjs文件
  // 这个ui库打包时是没有生成css文件的
  include: [/.*\/uno-vui\.js(.*)?$/, './**/*.vue']
})

添加virtual:uno.css到程序主入口文件

// main.ts
import '@unocss/reset/tailwind.css'; // css 预设,你也可以使用其他预设
import 'virtual:uno.css'; // unocss

全量导入（不推荐）

失去tree-shaking能力

import { createApp } from 'vue';
import { Unovui } from 'uno-vui';
import App from './App.vue';

const app = createApp(App);
app.use(Unovui);

按需导入（推荐）

你需要额外的插件来导入，首先安装插件

pnpmyarnnpm

shell

pnpm add unplugin-vue-components unplugin-auto-import -D

shell

yarn add unplugin-vue-components unplugin-auto-import -D

shell

npm install unplugin-vue-components unplugin-auto-import -D

然后在Vite配置中添加如下配置

// vite.config.ts
import Unocss from 'unocss/vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { defineConfig } from 'vite';
import { unovuiResolver } from 'uno-vui/utils';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Unocss(),
    AutoImport({
      imports: ["vue", "@vueuse/core"],
      ignore: ["h"],
      vueTemplate: true
    }),
    Components({
      resolvers: [
        unovuiResolver()
      ]
    })
  ],
})

Uno vui ​

简介 ​

安装 ​

配置 ​

全量导入（不推荐） ​

按需导入（推荐） ​

Uno vui

简介

安装

配置

全量导入（不推荐）

按需导入（推荐）