快速上手

创建项目

建议使用 Vite 创建新项目：

npm create vite@latest my-app -- --template vue-ts
cd my-app
npm install
npm install @nurdunui/nur-ui

引入 NUR

在 main.ts 中全局注册：

import { createApp } from 'vue'
import MyUI from '@nurdunui/nur-ui'
import '@nurdunui/nur-ui/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(MyUI)
app.mount('#app')

第一个组件

编辑 App.vue，使用一个带图标的按钮：

<template>
  <my-button type="primary" icon="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z">
    确认提交
  </my-button>
</template>

运行 npm run dev，即可看到第一个 NUR 按钮。

表单示例

结合多个组件搭建一个登录表单：

<template>
  <my-card title="用户登录" style="max-width: 400px; margin: 40px auto;">
    <my-form :model="form" :rules="rules">
      <my-form-item label="用户名" prop="username">
        <my-input v-model="form.username" placeholder="请输入用户名" />
      </my-form-item>
      <my-form-item label="密码" prop="password">
        <my-input v-model="form.password" type="password" placeholder="请输入密码" />
      </my-form-item>
      <my-form-item>
        <my-button type="primary" style="width: 100%;">登录</my-button>
      </my-form-item>
    </my-form>
  </my-card>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import type { FormRule } from '@nurdunui/nur-ui'

const form = reactive({ username: '', password: '' })

const rules: Record<string, FormRule[]> = {
  username: [{ required: true, message: '请输入用户名' }],
  password: [
    { required: true, message: '请输入密码' },
    { min: 6, message: '密码不少于6位' },
  ],
}
</script>

使用组合式 API

NUR 导出一组组合式函数，可用于自定义组件开发：

import { useNamespace, useSize, useGlobalConfig } from '@nurdunui/nur-ui'

const ns = useNamespace('custom-card')
// ns.b() → 'my-custom-card'
// ns.e('title') → 'my-custom-card__title'
// ns.m('active') → 'my-custom-card--active'

const size = useSize()        // 'default' | 'large' | 'small'
const config = useGlobalConfig()

全局配置

在 app.use() 时设置全局参数：

app.use(MyUI, {
  size: 'small',   // 所有组件默认使用小尺寸
  zIndex: 3000,    // Dialog/Message 等弹窗层级基数
  locale: 'zh-CN', // 默认语言
})

也可以在运行时获取和修改配置：

import { useGlobalConfig } from '@nurdunui/nur-ui'

const config = useGlobalConfig()
console.log(config.size) // 'small'