vue3 + ts + vite项目引入naive-ui

---

1.安装naive-ui

# 安装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'
  // theme
  import { createTheme, inputDark, datePickerDark } from 'naive-ui'
  // locale & dateLocale
  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

• 配置插件

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [NaiveUiResolver()]
    })
  ]
})

• ⚠️注意：此方法并不会处理函数 API，比如 useMessage，用户仍需要手动导入对应 API，例如 import { useMessage } from 'naive-ui'。

5.手动按需引入（全局）

• 建立单独文件引入所需组建

// naive-ui.ts
import { App } from 'vue'
import {
    // create naive ui
    create,
    // component
    NButton,
    NInput
  } from 'naive-ui'

const naive = create({
    components: [
	    NButton,
	    NInput
    ]
})
export default naive

• 在main.ts中引入组建并挂载使用

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// import './samples/node-api'
// 引入router
import router from './router/index'
// 引入naive-ui
import Naive from './plugin/naive-ui'

const app = createApp(App)

app.use(router)
app.use(Naive)

app.mount('#app')