Nuxt

Nuxt Framework 安装介绍

安装依赖

npm

pnpm

bun

yarn

npm install @obdesign/nuxt

在此之前, 需要确保项目正确安装了 unocss 和 @unocss/reset 。如果不知道如何安装，请您看这里 Unocss Vite Plugin 和 Unocss Browser Style Reset

配置预设

uno.config.ts

import { defineConfig, presetUno } from 'unocss'
import obPreset from '@obdesign/preset' // 这里和普通vite项目有所不同

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(), // 将预设添加到这里
  ],
})

注册模块

obdesign支持单独引入、和模块自动导包

3.1 单独引入

App.vue

<script setup lang="ts">
import { ObButton } from '@obdesign/components' // 这里和普通vite项目有所不同
</script>

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

3.2 模块自动导包（推荐）

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  // 注册模块
  modules: ['@unocss/nuxt', '@obdesign/nuxt'],
  // 为构建进行额外的编译
  build: { transpile: ['@obdesign/components'] },
  // 样式重置（无需另外导入其他重置文件）
  css: ['@unocss/reset/tailwind-compat.css'],
})

使用组件

<template>
  <ObButton>按钮</ObButton>
  <ObLink>链接</ObLink>
  <ObSpin />
  ...
</template>

很好! 现在你已经完成组件的快速入门！

On This Page

Star on GitHub Create Issues