Naive UI介绍：
一个 Vue 3 组件库比较完整，主题可调，使用 TypeScript，注意，naive-ui 仅支持 Vue3。
1、 安装
-
naiva ui
// 使用 npm 安装。npm i -D naive-ui-
字体安
npm i -D vfonts2、使用
-
直接引入（推荐）：你可以直接导入组件并使用它。这种情况下，只有导入的组件才会被打包。
<template><n-button>naive-ui</n-button>
</template><script>import { defineComponent } from 'vue'import { NButton } from 'naive-ui'export default defineComponent({components: {NButton}})
</script>如果你可以使用 setup script，你可以用下面的方式使用组件。
<template><n-button>naive-ui</n-button>
</template><script setup>import { NButton } from 'naive-ui'
</script>全局安装（不推荐）：安装全部组件
失去 tree-shaking 的能力，打包有冗余代码。如果你想全局安装但是不想安装全部组件，请参考按需引入。
import { createApp } from 'vue'
import naive from 'naive-ui'const app = createApp(App)
app.use(naive)使用
<template><n-button>naive-ui</n-button>
</template>-
按需引入
Naive UI 支持 tree shaking，组件、语言、主题均可 tree-shaking。默认情况组件主题为亮色，语言为英文，无需额外导入。了解更多关于主题设定的信息，参见调整主题。
手动引入
<script>import { defineComponent } from 'vue'import { NConfigProvider, NInput, NDatePicker, NSpace } from 'naive-ui'// themeimport { createTheme, inputDark, datePickerDark } from 'naive-ui'// locale & dateLocaleimport { zhCN, dateZhCN } from 'naive-ui'export default defineComponent({components: {NConfigProvider,NInput,NDatePicker,NSpace},setup() {return {darkTheme: createTheme([inputDark, datePickerDark]),zhCN,dateZhCN}}})
</script><template><n-config-provider :theme="darkTheme" :locale="zhCN" :date-locale="dateZhCN"><n-space vertical><n-input /><n-date-picker /></n-space></n-config-provider>
</template><style>body {background: black;}
</style>-
自动引入
- 可以使用
unplugin-auto-import插件来自动导入 API。
如果使用模板方式进行开发，可以使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件。
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({imports: ['vue',{'naive-ui': ['useDialog','useMessage','useNotification','useLoadingBar']}]}),Components({resolvers: [NaiveUiResolver()]})]
})按需全局安装组件（手动）
import { createApp } from 'vue'
import {// create naive uicreate,// componentNButton
} from 'naive-ui'const naive = create({components: [NButton]
})const app = createApp()
app.use(naive)3、配置字体
Naive UI 可以和 vfonts 配合，你可以简单的引入 vfonts 中的字体，包含常规字体和等宽字体。
只需要在你 App 的入口文件导入字体，即可调整 Naive UI 的字体。
// 你 App 的入口 js 文件
// ...// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'const app = createApp()
app.use(naive)// ...注意：不同 vfonts 字体提供的字重不同，在使用 Lato、OpenSans 的时候你需要全局调整 naive-ui 的字重配置。
<!-- 调整 naive-ui 的字重配置 -->
<n-config-provider :theme-overrides="{ common: { fontWeightStrong: '600' } }"><app />
</n-config-provider>注意：具体使用请参考官网：Naive UI
