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
}
复