从0到1，带你搭建Vite+Vue3+Pinia+Naive UI后台（三） - UI组件篇

UI组件篇

本篇主要介绍如何集成Naive UI，实现Naive UI的按需引入、主题色修改，以及基础组件的配置使得使用Naive UI更加的得心应手

安装并按需引入Naive UI

Naive UI 官方文档

一、安装Naive UI、unplugin-vue-components

pnpm i naive-ui unplugin-vue-components -D
复制代码

二、 修改 build/plugin/index.js

build/plugin/index.js

import vue from '@vitejs/plugin-vue'

/**
 * * 扩展setup插件，支持在script标签中使用name属性
 * usage: <script setup name="MyComp"></script>
 */
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// rollup打包分析插件
import visualizer from 'rollup-plugin-visualizer'

import { configHtmlPlugin } from './html'
import { unocss } from './unocss'

/**
 * * 组件库按需引入插件
 * usage: 直接使用组件,无需在任何地方导入组件
 */
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

export function createVitePlugins(viteEnv, isBuild) {
  const plugins = [
    vue(),
    VueSetupExtend(),
    configHtmlPlugin(viteEnv, isBuild),
    unocss(),
    Components({
      resolvers: [NaiveUiResolver()],
    }),
  ]

  if (isBuild) {
    plugins.push(
      visualizer({
        open: true,
        gzipSize: true,
        brotliSize: true,
      })
    )
  }
  return plugins
}
复制代码

具