一、為什麼選擇 Naive UI + UnoCSS？
| 維度 | Naive UI | UnoCSS |
|---|---|---|
| 定位 | 企業級 Vue 3 元件庫 | 按需原子化 CSS 引擎 |
| 體積 | Tree-shaking 按需載入 | 零執行時 |
| TypeScript | 原生 TypeScript 編寫 | 規則預設型別安全 |
| 主題 | 內建亮色/暗色主題 | 與 Naive UI 主題變數互通 |
二、Naive UI 自動匯入
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'] }離散 API 全域注入
const { message, dialog } = createDiscreteApi(['message', 'dialog'])
;(globalThis as any).__salongMessage = message三、UnoCSS 架構
unocss: { nuxtLayers: true }分工：
- Naive UI 主題變數 →
custom.scss - 全域佈局/重置 →
main.scss - 元件級樣式 → UnoCSS 原子類
四、Vite 最佳化
vite: {
optimizeDeps: { include: ['naive-ui', 'vueuc', 'dayjs', ...] },
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'
}
}
}
}
}
}五、總結
- 零手動匯入：AutoImport + NaiveUiResolver
- 主題體系：Naive UI 變數 → UnoCSS shortcuts → SCSS 覆蓋
- SSR 友好：@css-render/vue3-ssr + esbuild 壓縮
