Skip to content

安装 ​

环境要求 ​

NUR 依赖 Vue 3.4+,需要 Node.js 18+ 环境:

依赖版本
Node.js>= 18
Vue^3.4.0
TypeScript(可选)^5.0.0

安装 ​

bash
# npm
npm install @nurdunui/nur-ui

# pnpm
pnpm add @nurdunui/nur-ui

# yarn
yarn add @nurdunui/nur-ui

全局引入 ​

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, {
  size: 'default',
  locale: 'zh-CN',
})
app.mount('#app')

全局引入后,所有组件均可直接在模板中使用:

vue
<template>
  <my-button type="primary">按钮</my-button>
  <my-input v-model="value" placeholder="请输入" />
</template>

按需引入 ​

每个组件是独立的 Vue 插件,可以单独注册:

ts
import { createApp } from 'vue'
import { MyButton, MyInput, MyDialog } from '@nurdunui/nur-ui'
import '@nurdunui/nur-ui/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(MyButton).use(MyInput).use(MyDialog)
app.mount('#app')

配合 unplugin-vue-components 可实现自动按需导入:

ts
// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Components({
      resolvers: [
        (name) => {
          if (name.startsWith('My')) {
            return { name, from: '@nurdunui/nur-ui' }
          }
        },
      ],
    }),
  ],
}

全局配置项 ​

参数说明类型默认值
size全局组件尺寸'large' | 'default' | 'small''default'
zIndex弹窗层级基数number2000
namespaceCSS 类名前缀string'my'
locale国际化语言'zh-CN' | 'en-US''zh-CN'