安装
环境要求
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 | 弹窗层级基数 | number | 2000 |
| namespace | CSS 类名前缀 | string | 'my' |
| locale | 国际化语言 | 'zh-CN' | 'en-US' | 'zh-CN' |