查看我们的网站 k-naiveui-pro 了解更多信息.
简体中文 | English
目前在测试阶段请勿用于生产环境
pnpm add naive-ui k-naiveui-pro unocss @vueuse/core @iconify/vue
一. 在 main.ts
中注册组件
import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'
import KNaiveUiPro from 'k-naiveui-pro'
const app =createApp(App)
app.use(naive)
app.use(KNaiveUiPro)
app.mount('#app')
二. 在 vite.config.ts
添加 UnoCSS 插件
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
UnoCSS()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
三. 在项目根下创建一个 uno.config.ts
文件, 配置如下:
import {defineConfig, presetUno} from 'unocss'
export default defineConfig({
presets: [presetUno()],
})
pnpm add k-naiveui-pro-resolver unplugin-vue-components
- 在
vite.config.ts
文件添加 NaiveUiResolver KNaiveUiProResolver 插件并配置
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import { KNaiveUiProResolver } from 'k-naiveui-pro-resolver'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
UnoCSS(),
Components({
resolvers: [
NaiveUiResolver(),
KNaiveUiProResolver()
]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
- 添加 ProLayout
- 添加 ProBaseForm
- 添加 ProQueryForm
- 添加 ProStepsForm
- 添加 ProCrud
- 添加 ProBreadcrumb
- 添加 ProBackground
- 添加 ProTabs
- 添加 ProCheckbox
- 添加 ProRadio
- 添加 ProColumnSetting
- 添加 ProDescriptions
- 添加 ProToggleFullScreen
- 添加 ProToggleLanguage
- 添加 ProToggleTheme
- 添加 ProCheckCard
- 添加 ProAvatar
MIT
Copyright (c) 2024-present, kylin