Small Tail Doc

外观

开始使用

922 字约 3 分钟

2024-12-31

安装 Naive UI 组件库并配置组件自动按需引入

安装 Naive UI 组件库

npm
npm i -D naive-ui

配置 Naive UI 组件自动按需引入

  1. 安装自动导入 API 和按需自动加载组件的插件
npm
npm i -D unplugin-auto-import  unplugin-vue-components
  1. 使用插件，配置 Navie UI API 自动导入和组件自动按需引入
vite.config.js | vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 自动引入 API 的插件
import AutoImport from 'unplugin-auto-import/vite'
// 按需自动加载组件的插件
import Components from 'unplugin-vue-components/vite'
// 按需自动加载 Naive UI 组件的解析器，用于帮助按需自动加载组件的插件自动按需加载 Navie UI 组件
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动引入 API 的插件
    AutoImport({ 
      // 自动引入 Vue 和 Navie UI 中的 API
      imports: [ 
        'vue', 
        { 
          'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'], 
        }, 
      ], 
    }), 
    // 按需自动加载组件的插件
    Components({ 
      resolvers: [NaiveUiResolver()], 
    }), 
  ],
})

安装 Small Tail UI Vue3 Naive 组件库

npm
npm install st-ui-vue3-navie

使用

手动按需引入

全局引入组件库完整样式后手动按需引入使用组件

  1. 在项目入口文件中全局引入组件库的完整样式文件
main.js | main.ts
import 'st-ui-vue3-navie/es/st-ui-vue3-navie.css'
import { createApp } from 'vue'
import App from './App.vue'
  1. 按需手动引入组件后使用组件

这里以 StnIconifyIconSelector 组件为例。

App.vue
<script setup lang="ts">
  import {StnIconifyIconSelector} from 'st-ui-vue3-navie'
</script>

<template>
  <!-- 
    在 StnIconifyIconSelector 组件中使用了 Naive UI 中的 useMessage API，
    因此需要在外层包裹一个 NMessageProvider 组件 
  -->
  <n-message-provider>
    <StnIconifyIconSelector :set-prefixes="['mdi']"/>
  </n-message-provider>
</template>

手动按需引入组件和相应的样式后使用组件

这里以 StnIconifyIconSelector 组件为例。

App.vue
<script setup lang="ts">
import {StnIconifyIconSelector} from 'st-ui-vue3-navie'
import 'st-ui-vue3-navie/es/components/StnIconifyIconSelector/StnIconifyIconSelector.css'
</script>

<template>
  <n-message-provider>
    <StnIconifyIconSelector :set-prefixes="['devicon', 'mdi']" />
  </n-message-provider>
</template>

全局注册

全局注册所有组件

  1. 在项目入口文件中全局引入组件库的完整样式文件
main.js | main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'st-ui-vue3-navie/es/st-ui-vue3-navie.css'
  1. 在项目入口文件中全局注册组件库中的所有组件
main.js | main.ts
import 'st-ui-vue3-navie/es/st-ui-vue3-navie.css'
import { createApp } from 'vue'
import App from './App.vue'
// 全局注册整个 st-ui-vue3-navie 组件库中所有组件的插件
import {StUiVue3Navie} from 'st-ui-vue3-navie'

createApp(App)
  // 全局注册整个 st-ui-vue3-navie 组件库中所有组件
  .use(StUiVue3Navie)
  .mount('#app')
  1. 使用组件

这里以 StnIconifyIconSelector 组件为例。

App.vue
<template>
  <n-message-provider>
    <StnIconifyIconSelector :set-prefixes="['mdi']" :pageSizeDefault="100"/>
  </n-message-provider>
</template>

全局注册指定组件

这里以 StnIconifyIconSelector 组件为例。

  1. 在项目入口文件中引入要全局注册的指定组件的样式文件
main.js | main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'st-ui-vue3-navie/es/components/StnIconifyIconSelector/StnIconifyIconSelector.css'
  1. 在项目入口文件中全局注册指定组件
main.js | main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'st-ui-vue3-navie/es/components/StnIconifyIconSelector/StnIconifyIconSelector.css'
// st-ui-vue3-navie 组件库中 StnIconifyIconSelector 组件的注册插件
import {StnIconifyIconSelectorRegister} from "st-ui-vue3-navie"

createApp(App)
  // 全局注册 st-ui-vue3-navie 组件库中的 StnIconifyIconSelector 组件
  .use(StnIconifyIconSelectorRegister)
  .mount('#app')
  1. 使用组件
App.vue
<template>
  <n-message-provider>
    <StnIconifyIconSelector :set-prefixes="['mdi']" :pageSizeDefault="100"/>
  </n-message-provider>
</template>

贡献者

变更历史

最后更新于: 查看全部变更历史

  • 更新：图标选择器新增组件参数文档说明

    于 2025/1/4