Vite

Vue3 单页面项目 安装介绍

安装依赖

npm
pnpm
bun
yarn
npm install obdesign

配置预设

uno.config.ts 
import { defineConfig, presetUno } from 'unocss'
import obPreset from 'obdesign/preset'

export default defineConfig({
  content: {
    pipeline: {
      include: [
        // the default
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // 编写提取文件路径（重要！）
        /.*\/ob\/.*\.(js|ts|vue|mjs|cjs)/,
      ],
    },
  },
  presets: [
    presetUno(),
    obPreset(), // 将预设添加到这里
  ],
})

注册组件

3.1 单独引入

ℹ️ 3.2 中 main.ts 的 unocss核心样式 和 样式重置文件 也需要导入到 main.ts 当中

App.vue 
<script setup lang="ts">
import { ObButton } from 'obdesign'
</script>

<template>
  <ObButton>hello</ObButton>
</template>

3.2 全局注册

// main.ts
import { createApp } from 'vue'
import obdesign from 'obdesign/plugin' // 导入插件
import App from './App.vue'

// 导入 unocss 核心样式
import 'virtual:uno.css'
// 样式重置（无需另外导入其他重置文件）
import '@unocss/reset/tailwind-compat.css'

// 注册插件
createApp(App).use(obdesign).mount('#app')

3.3 自动导包（推荐）

ℹ️ 3.2 中 main.ts 的 unocss核心样式 和 样式重置文件 也需要导入到 main.ts 当中，只是不需要注册插件

ℹ️ 要使用自动导包, 需要确保项目正确安装了 unplugin-vue-components 。如果不知道如何安装，请您看这里 unplugin-vue-components

vite.config.ts 
import { URL, fileURLToPath } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import UnoCSS from 'unocss/vite'
import Components from 'unplugin-vue-components/vite'
import obdesignAutoImport from 'obdesign/auto'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    UnoCSS(),
    Components({
      // 将解释器放到这里
      resolvers: [obdesignAutoImport()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

使用组件

App.vue 
<template>
  <ObButton>按钮</ObButton>
  <ObLink>链接</ObLink>
  <ObSpin />
  ...
</template>
项目介绍
一款基于 Vue 3 和 Unocss 的现代组件库，包含 Unocss 预设
Nuxt
Nuxt Framework 安装介绍