1. Why Naive UI + UnoCSS?
| Dimension | Naive UI | UnoCSS |
|---|---|---|
| Role | Enterprise Vue 3 component library | On-demand atomic CSS engine |
| Bundle Size | Tree-shaking | Zero runtime |
| TypeScript | Native TS | Type-safe presets |
| Theming | Light/dark themes | Shares Naive UI variables |
| SSR | @css-render/vue3-ssr | Inline CSS, zero overhead |
2. Naive UI Auto-Import
plugins: [
AutoImport({
imports: [{
'naive-ui': ['createDiscreteApi', 'useOsTheme', 'useMessage', 'useDialog',
'lightTheme', 'darkTheme', 'zhCN', 'zhTW', 'dateZhCN', 'dateZhTW']
}]
}),
Components({ resolvers: [NaiveUiResolver()] })
]{ "dependencies": { "@css-render/vue3-ssr": "^0.15.14" } }build: { transpile: ['naive-ui', 'vueuc', 'radash'] }Global Discrete API Injection
const { message, dialog } = createDiscreteApi(['message', 'dialog'])
;(globalThis as any).__salongMessage = message3. UnoCSS Architecture
unocss: { nuxtLayers: true }CSS division of labor:
- Naive UI theme variables →
custom.scss - Global layout/reset →
main.scss - Component styling → UnoCSS atomic classes
4. Vite Optimization
vite: {
optimizeDeps: { include: ['naive-ui', 'vueuc', 'dayjs', 'dompurify', ...] },
build: {
minify: 'esbuild', cssMinify: true, assetsInlineLimit: 4096,
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules/@vue-office')) {
const pkg = id.match(/@vue-office\\/([^/]+)/)?.[1]
return pkg ? `vue-office-${pkg}` : 'vue-office'
}
}
}
}
}
}5. Summary
- Zero manual imports: AutoImport + NaiveUiResolver
- Unified theming: Naive UI variables → UnoCSS shortcuts → SCSS overrides
- SSR-friendly: @css-render/vue3-ssr + esbuild minification
