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

预览地址：vue-naive-admin

前言

今年换(ru)了(keng)一份新工作，加班非常严重，贡献了人生的第一次、等二次、第三次凌晨6点回家的经历 [捂脸哭] ，心力憔悴，直接导致拖更严重，万分抱歉

从0到1序列文章

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
}

具体文件改动请看下图

三、 验证是否集成成功

为方便验证，我们先处理下原来App.vue中的内容

1. 新建文件 src/views/test-page/unocss/index.vue
2. 把原来 App.vue 的内容剪切到新文件中

我们从Naive UI官方文档拷贝一段按钮组件的示例代码到 App.vue中

App.vue

<template>
  <n-space m-50>
    <n-button>Default</n-button>
    <n-button type="tertiary"> Tertiary </n-button>
    <n-button type="primary"> Primary </n-button>
    <n-button type="info"> Info </n-button>
    <n-button type="success"> Success </n-button>
    <n-button type="warning"> Warning </n-button>
    <n-button type="error"> Error </n-button>
  </n-space>
</template>

看到下图页面就证明集成成功了

配置方式十分简单，配置完我们就可以无需引入直接使用Naive UI的任意组件了（不过有几个基础组件使用会稍微麻烦点，下面会讲到）

修改主题色

Naive UI 提供了多种调整主题色的方式，下面介绍其中一种方式，有其他需求的可以参看 调整主题 - Naive UI

1. 新建文件 src/components/AppProvider/index.vue

src/components/AppProvider/index.vue

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <slot></slot>
  </n-config-provider>
</template>

<script setup>
const themeOverrides = {
  common: {
    primaryColor: '#316C72FF',
    primaryColorHover: '#316C72E3',
    primaryColorPressed: '#2B4C59FF',
    primaryColorSuppl: '#316C7263',
  },
}
</script>

1. 修改文件 App.vue

App.vue

<template>
  <AppProvider>
    <n-space m-50>
      <n-button>Default</n-button>
      <n-button type="tertiary"> Tertiary </n-button>
      <n-button type="primary"> Primary </n-button>
      <n-button type="info"> Info </n-button>
      <n-button type="success"> Success </n-button>
      <n-button type="warning"> Warning </n-button>
      <n-button type="error"> Error </n-button>
    </n-space>
  </AppProvider>
</template>

<script setup>
import AppProvider from '@/components/AppProvider/index.vue'
</script>

看到下图效果发现我们修改的主题生效了

基础组件配置

上文有提到有部分基础组件使用起来有点麻烦，比如 Message 组件，要使用Message需要像上图一样在外面套一层 n-message-provider , 并且不能在setup外使用，十分的不便，当然官方也提供了特殊的解决方式

修改 src/components/AppProvider/index.vue

src/components/AppProvider/index.vue

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <n-loading-bar-provider>
      <n-dialog-provider>
        <n-notification-provider>
          <n-message-provider>
            <slot></slot>
            <NaiveProviderContent />
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script setup>
import { defineComponent, h } from 'vue'
import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'

const themeOverrides = {
  common: {
    primaryColor: '#316C72FF',
    primaryColorHover: '#316C72E3',
    primaryColorPressed: '#2B4C59FF',
    primaryColorSuppl: '#316C7263',
  },
}

// 挂载naive组件的方法至window, 以便在全局使用
function setupNaiveTools() {
  window.$loadingBar = useLoadingBar()
  window.$dialog = useDialog()
  window.$message = useMessage()
  window.$notification = useNotification()
}

const NaiveProviderContent = defineComponent({
  setup() {
    setupNaiveTools()
  },
  render() {
    return h('div')
  },
})
</script>

修改 App.vue 验证是否生效

App.vue

...

<script setup>
import { onMounted } from 'vue'
import AppProvider from '@/components/AppProvider/index.vue'

onMounted(() => {
  $loadingBar.start()
  setTimeout(() => {
    $loadingBar.finish()
    $message.success('加载完成，Perfect~')
  }, 500)
})
</script>

看到下图效果就没问题了

总结

Naive UI 在Vue3组件库中算是相当优秀的了，组件完整、主题可调，并且所有组件都可以 treeshaking，整体风格清爽，也得到了尤大赞扬和肯定，目前github 9.2k star，作为一款没有Vue2用户积淀的UI组件库已经很不错了

UI组件篇完结如有跟着一起做的同学可以git提交一下代码，如有错误之处请在评论区提醒指正，下一篇再见~

最后，请各位赏个赞和star，你的赞和star是我持续更新和维护的动力哦

---

源码-github：vue-naive-admin (github.com)

源码-gitee：vue-naive-admin (gitee.com)