从0到1,带你搭建Vite+Vue3+Pinia+Naive UI后台(三) - UI组件篇

·  阅读 10830
从0到1,带你搭建Vite+Vue3+Pinia+Naive UI后台(三) - UI组件篇

预览地址:vue-naive-admin

前言

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

从0到1序列文章

  1. 从0到1,带你搭建Vite+Vue3+Pinia+Naive UI后台(一) - 前置篇 - 掘金 (juejin.cn)
  2. 从0到1,带你搭建Vite+Vue3+Pinia+Naive UI后台(二) - 配置篇(上) - 掘金 (juejin.cn)
  3. 从0到1,带你搭建Vite+Vue3+Pinia+Naive UI后台(二) - 配置篇(中) - 掘金 (juejin.cn)
  4. 从0到1,带你搭建Vite+Vue3+Pinia+Naive UI后台(二) - 配置篇(下) - 掘金 (juejin.cn)

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
}
复制代码

具体文件改动请看下图

image.png

三、 验证是否集成成功

为方便验证,我们先处理下原来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>
复制代码

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

image.png

配置方式十分简单,配置完我们就可以无需引入直接使用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>
复制代码

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

image.png

基础组件配置

image.png

上文有提到有部分基础组件使用起来有点麻烦,比如 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>
复制代码

看到下图效果就没问题了

image.png

总结

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)

下一篇: 从0到1,带你搭建Vite+Vue3+Pinia+Naive UI后台(四) - 完结篇 - 掘金 (juejin.cn)

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改