naive-ui

一、UI库的选择

项目早期使用Element Plus，后因vue 作者尤雨溪（Evan You）推荐，切换为naive-ui。选择原因是naive-ui的设计理念前卫，符合现代组件库设计，相比Element Plus更贴合项目需求。

一、UI库的选择

项目早期使用Element Plus，后因vue 作者尤雨溪（Evan You）推荐，切换为naive-ui。选择原因是naive-ui的设计理念前卫，符合现代组件库设计，相比Element Plus更贴合项目需求。

二、Naive UI的使用细节

项目根节点（src/App下）以UI Provider为核心，基于vue的provide/inject机制实现全局上下文，提供组件库的全局配置，包含以下关键部分：

• 自动引入：借助unplugin-vue-components插件，原生组件（如n-input、n-button等）可直接在template中使用，无需手动引入；
• TS支持：使用组件时（如n-input、n-button），TypeScript可提供props自动提示（control+空格触发）。

2. 根节点结构与全局配置

• 第一层：UI Provider及下属的全局提示类provider（loading bar provider、dialog provider、notification provider、message provider等）；
• 第二层：Theme Provider，通过n-element用于让Naive UI的CSS变量（如primary color、secondary color）在全局生效，配合unocss可通过预设class使用主题样式；
• 第三层：Message provider，通过Naive UI的useLoadingBar、useMessage等hooks，将实例挂载到window，实现全局直接唤起。