N-UI

Appearance

快速上手 ​

安装 ​

bash
# pnpm
pnpm add @n-ui/ui

# npm
npm install @n-ui/ui

完整引入 ​

ts
import { createApp } from 'vue'
import NUI from '@n-ui/ui'
import '@n-ui/themes/src/index.scss'

const app = createApp(App)
app.use(NUI)

按需引入 ​

vue
<script setup>
import { NButton } from '@n-ui/ui'
</script>

<template>
  <NButton type="primary">Hello N-UI</NButton>
</template>

自动导入 (推荐) ​

安装 unplugin-vue-components 和 unplugin-auto-import：

bash
pnpm add -D unplugin-vue-components unplugin-auto-import

在 vite.config.ts 中配置：

ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NUIResolver } from '@n-ui/ui/resolver'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [NUIResolver()],
    }),
    Components({
      resolvers: [NUIResolver()],
    }),
  ],
})