1.安装naive-ui
npm i -D naive-ui
npm i -D vfonts
2.手动引入(局部)
<script>
import { defineComponent } from 'vue'
import { NConfigProvider, NInput, NDatePicker, NSpace } from 'naive-ui'
import { createTheme, inputDark, datePickerDark } from 'naive-ui'
import { zhCN, dateZhCN } from 'naive-ui'
export default defineComponent({
components: {
NConfigProvider,
NInput,
NDatePicker,
NSpace
},
setup() {
return {
darkTheme: createTheme([inputDark, datePickerDark]),
zhCN,
dateZhCN
}
}
})
</script>
3.自动按需引入(全局)
npm i -D unplugin-vue-components
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [NaiveUiResolver()]
})
]
})
- ⚠️注意:此方法并不会处理函数 API,比如
useMessage
,用户仍需要手动导入对应 API,例如 import { useMessage } from 'naive-ui'
。
5.手动按需引入(全局)
import { App } from 'vue'
import {
create,
NButton,
NInput
} from 'naive-ui'
const naive = create({
components: [
NButton,
NInput
]
})
export default naive
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import Naive from './plugin/naive-ui'
const app = createApp(App)
app.use(router)
app.use(Naive)
app.mount('#app')