前端UI组件【免费下载链接】naive-uiA Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.项目地址https://gitcode.com/gh_mirrors/na/naive-ui点击查看免费下载Naive UI当前仓库版本 2.45.2是一套基于 Vue 3、使用 TypeScript 编写的组件库其打包产物从设计之初就为按需引入做了优化组件、语言包与主题均可 tree-shaking。本文以官方文档 demo/pages/docs/import-on-demand/enUS/index.md 为骨架结合仓库源码讲解手动引入、unplugin-auto-import/unplugin-vue-components自动引入、以及create()按需全局安装三种落地方式并深入其底层实现原理帮助你写出体积更小、加载更快的 Naive UI 应用。按需引入的前提sideEffects 与模块化产物按需引入Tree Shaking依赖打包器Vite/Rollup/webpack对“未使用导出”的静态分析删除能力而组件库本身必须满足两个条件ES Module 产物与无副作用声明。在 package.json 中可以确认 Naive UI 的产物设计{ name: naive-ui, version: 2.45.2, sideEffects: false, main: lib/index.js, module: es/index.mjs, types: es/index.d.ts }module: es/index.mjs提供 ES Module 格式产物是 tree-shaking 生效的基础sideEffects: false显式声明所有模块均无副作用打包器可安全删除未被引用的导出仓库中的 esm-test/index.spec.js 会直接以dist/index.prod.mjs为入口执行 ESM 冒烟测试验证产物在import { NDataTable }后可以正常挂载渲染从侧面印证了 ESM 产物的可用性。官方默认行为是不额外配置时组件主题为亮色light、语言为英文enUS因此最小化使用场景下不需要任何额外导入。需要定制主题时可参考 调整主题。手动引入组件、主题、语言按需组合最直接的按需引入方式是手动import所需导出。官方文档给出的完整示例script import { defineComponent } from vue import { NConfigProvider, NInput, NDatePicker, NSpace } from naive-ui // theme import { createTheme, inputDark, datePickerDark } from naive-ui // locale dateLocale import { zhCN, dateZhCN } from naive-ui export default defineComponent({ components: { NConfigProvider, NInput, NDatePicker, NSpace }, setup() { return { darkTheme: createTheme([inputDark, datePickerDark]), zhCN, dateZhCN } } }) /script template n-config-provider :themedarkTheme :localezhCN :date-localedateZhCN n-space vertical n-input / n-date-picker / /n-space /n-config-provider /template style body { background: black; } /style这个示例同时展示了三件事组件按需导入NConfigProvider、NInput、NDatePicker、NSpace只引入用到的组件主题按需组合inputDark、datePickerDark是单个组件的暗色主题通过createTheme([...])组合成一个只包含这两个组件主题的全局主题对象而不是整体引入darkTheme语言按需导入zhCN组件文案与dateZhCN日期面板文案分别对应语言包的两类导出。createTheme 的源码实现从 src/themes/utils.ts 可以看到createTheme的真实逻辑export function createTheme(componentThemes: ComponentThemes): GlobalTheme export function createTheme( name: string | ComponentThemes, componentThemes?: ComponentThemes ): GlobalTheme { const nameIsString typeof name string const theme: GlobalTheme { name: nameIsString ? name : customized-theme } if (nameIsString) { if (componentThemes) { for (const cTheme of componentThemes) { theme[cTheme.name] cTheme as any } } } else { for (const cTheme of name) { theme[cTheme.name] cTheme as any } } return theme }它支持两种调用形态createTheme(name, componentThemes)或createTheme(componentThemes)此时主题名固定为customized-theme。返回的全局主题对象会按cTheme.name作为键挂载各组件主题——这正是按需组合主题的底层机制。你不需要的组件主题如按钮、表格完全不会出现在这个对象中。主题与语言包的导出边界主题完整暗色主题导出为darkThemesrc/themes/index.ts而单组件暗色主题在 src/styles.ts 中逐个导出如buttonDark、inputDark、datePickerDark、dataTableDark等文档示例正是利用这类细粒度导出实现主题级 tree-shaking语言Naive UI 在 src/locales/index.ts 中为 79 种语言分别导出xxXX通用文案与dateXxXX日期文案两类对象例如zhCN/dateZhCN、jaJP/dateJaJP。语言包全部经 src/index.ts 的export * from ./locales对外提供但只有被显式 import 的语言才会进入产物。自动引入unplugin 插件方案推荐如果项目使用 Vite SFC单文件组件开发官方推荐用两个 unplugin 插件实现“零手动 import”的按需引入unplugin-auto-import自动导入API如useDialog、useMessage等组合式函数unplugin-vue-components自动解析模板中出现的组件并导入配合NaiveUiResolver解析器。官方给出的vite.config.ts完整配置import vue from vitejs/plugin-vue import AutoImport from unplugin-auto-import/vite import { NaiveUiResolver } from unplugin-vue-components/resolvers import Components from unplugin-vue-components/vite // vite.config.ts import { defineConfig } from vite // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ imports: [ vue, { naive-ui: [ useDialog, useMessage, useNotification, useLoadingBar ] } ] }), Components({ resolvers: [NaiveUiResolver()] }) ] })配置要点说明AutoImport.imports中vue让ref、computed等 Vue API 也可自动导入naive-ui数组列出需要自动导入的 API 名称可按需增删例如补充useThemeVarsComponents.resolvers注册NaiveUiResolver()插件在编译模板时发现n-button、n-data-table等标签后自动生成对应的import { NButton } from naive-ui从而实现组件级按需加载该方案下既不需要手动 import 组件也不需要手动 import 上述 API模板与setup中直接使用即可。配置完成后.vue文件中直接使用组件与 API无需任何手写 import 语句构建时由插件按需注入。若使用非 Vite 的构建工具webpack 等unplugin 系列同样提供对应的 webpack 插件入口可查阅插件自身文档配置。按需全局安装create() 与全局组件注册如果你希望用“全局注册”的方式使用组件但又不想一次注册全部组件全量注册会引入所有组件可以使用官方提供的create()工厂函数只注册你列出的组件import { // create naive ui create, // component NButton } from naive-ui import { createApp } from vue const naive create({ components: [NButton] }) const app createApp() app.use(naive)安装后在 SFC 模板中直接使用template n-buttonnaive-ui/n-button /templatecreate() 的源码剖析src/create.ts 完整实现了这一机制function create({ componentPrefix N, components [] }: NUiCreateOptions {}): NUiInstance { const installTargets: App[] [] function registerComponent( app: App, name: string, component: ComponentType ): void { const registered app.component(componentPrefix name) if (!registered) { app.component( componentPrefix name, component as Componentany | DefineComponentany ) } } function install(app: App): void { if (installTargets.includes(app)) return installTargets.push(app) components.forEach((component) { const { name, alias } component registerComponent(app, name as string, component) if (alias) { alias.forEach((aliasName: string) { registerComponent(app, aliasName, component) }) } }) } return { version, componentPrefix, install } }几个值得注意的实现细节组件名前缀componentPrefix默认为N因此NButton会注册为n-button可通过create({ componentPrefix: X })自定义前缀幂等安装installTargets记录了已安装的App实例同一个 app 重复app.use(naive)不会重复注册app.component(prefix name)的二次查询也避免了覆盖已存在组件别名支持每个组件可携带alias数组如NxButtoncreate()会一并注册所有别名。以 src/button/index.ts 为例它同时导出NButton与XButton as NxButton在 src/components.ts 汇总后即形成组件及其别名注册表返回值create()返回{ version, componentPrefix, install }的插件对象可直接传给app.use()。与全量预设 install 的对比如果不使用create()而直接import naive from naive-ui再app.use(naive)实际执行的是 src/preset.ts 中的全量预设import * as components from ./components import create from ./create const naive create({ components: Object.keys(components).map( key components[key as keyof typeof components] ) }) export default naive export const install naive.install即把 src/components.ts 导出的全部组件交给create()注册。这是最简单但产物最大的方案对包体积敏感的项目应改用create({ components: [...] })只列所需组件或采用上一节的自动引入方案。三种方案对比与选型建议方案使用方式产物体积适用场景手动引入每个文件手写import { NButton } from naive-ui最小完全由你控制组件使用点少、追求极致控制自动引入unplugin配置 Vite 插件模板/API 免 import最小按模板实际使用导入推荐默认方案SFC Vite 项目create()按需全局安装手动列出组件数组后app.use(naive)仅注册列出的组件需要全局组件名、不依赖模板解析插件三种方式都建立在“组件、语言、主题均可 tree-shaking”这一仓库级能力之上可组合使用例如用自动引入处理绝大多数组件同时用create()在入口注册少量全局组件。实践注意事项默认值不传theme时组件为亮色主题不传locale/date-locale时语言为enUS均无需额外导入主题链路按需组合暗色主题后需通过n-config-provider的:theme传入如文档示例的:themedarkTheme语言同理通过:locale与:date-locale传入类型提示create()的components数组、NaiveUiResolver()的解析均依赖 TypeScript 类型导出types: es/index.d.ts自动引入插件在生成 dts 时同样依赖es/index.d.ts验证方式仓库提供了 ESM 产物冒烟测试esm-test/index.spec.js与 UMD 测试umd-test/index.spec.js在改动产物构建链路后可通过pnpm run test:esm与pnpm run test:umd验证构建结果可正常挂载这是确认按需引入产物健康的低成本手段。按需引入是 Naive UI 控制包体大小的核心手段手动引入适合精确控制unplugin 自动引入适合常规 SFC 项目create()则提供了“全局注册但不全量注册”的折中方案。理解sideEffects、createTheme与create()的实现细节后你可以在任何构建工具链下做出合适的取舍。赞分享前端UI组件【免费下载链接】naive-uiA Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.项目地址https://gitcode.com/gh_mirrors/na/naive-ui点击查看免费下载相关推荐originui组件按需引入Tree Shaking实践originui组件按需引入Tree Shaking实践 你是否曾遇到过这样的困境项目中只用到了几个UI组件最终打包文件却大得惊人 originui通过前端UI组件设计系统ReNative性能优化指南让你的跨平台应用运行如飞 ReNative性能优化指南让你的跨平台应用运行如飞 ReNative是一个强大的 跨平台开发框架 支持iOS、Android、Web、TV、桌面等1前端UI组件如何通过ES模块设计优化Sonner的Tree-shaking与按需导入性能如何通过ES模块设计优化Sonner的Tree shaking与按需导入性能 Sonner是一个轻量级且功能强大的React通知组件库它通过精心设计的ES模块上一篇electerm终端工具v1.91.1版本发布优化文件夹传输与布局管理下一篇Mos 3.5.0版本发布优化滚动体验与多语言支持创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考