Skip to content

组件库模式总览

#模式来源关键词
01<ConfigProvider> provide/injectElement PlusprovideGlobalConfig / useGlobalConfig
02Headless composable + 用户样式Headless UI / Reka UIuseToggle / Primitive
03CSS 变量主题系统Naive UIuseThemeVars / cssVarsRef
04Form / FormItem context 注入Ant Design VueformItemContextKey
05多态组件(Polymorphic asElement Plus / Reka UI<component :is> + 类型守卫
06虚拟滚动列表Element Plus el-table-v2 / Naive UI固定行高 + 缓冲区
07按需引入样式unplugin-vue-componentsresolvers / babel-plugin-import
08SSR 适配Element Plus / PrimeVue<ClientOnly> / hydration

学习建议

时间紧:直接看 01 → 03 → 05 → 06(覆盖 80% 选型决策)

自研组件库:02 → 04 → 05 → 08(4 节看完能写出 MVP 组件库)

打包体积问题:07 必看,并对比 01 的 namespace 类名