1.Naive Ui Admin - 基于 Vue3/Vite/TS 等最新的前端技术栈构建的免费开源中后台前端框架
2.Naive Ui Admin前端集成框架
3.HelloElectron——引入NaiveUI、Pinia简单美化（四）
4.2021, 九款值得推荐的 VUE3 UI 框架
5.深入理解Vue3自定义指令ClickOutside的实现
6.两万七千字大章带你使用 Vue3、Vite、TypeScript、Less、Pinia、通辽网站源码Naive-ui 开发 Chrome V3 插件

Naive Ui Admin - 基于 Vue3/Vite/TS 等最新的前端技术栈构建的免费开源中后台前端框架

       Naive Ui Admin 是一款基于 Vue3.0、Vite、Naive UI、TypeScript 的免费开源中后台前端框架。它结合了 Naive Ui 的高质量 UI 组件库，提供了一套完整的中后台管理系统解决方案。Naive Ui Admin 提炼了常见且具有代表性的业务模型页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等，旨在帮助开发者快速搭建企业级中后台项目，提高开发效率。

       这款框架使用了最新的前端技术栈，有助于学习和生产应用。用户可以快速上手，体验到高质量的中后台管理框架带来的便捷。然而，对于复杂业务场景，尽管提供了丰富的业务组件，仍可能需要额外实现一些操作界面。

       Naive Ui Admin 由 @Ah jung 开发和维护，更新频繁，文档和源码资源丰富，上手难度不大。它借鉴了 vue-vben-admin 实现的骨架，与后者一样，是象棋源码大全一款颜值高且功能强大的优秀 admin 框架。

       Naive Ui Admin 和 Naive Ui 一样，完全免费开源，基于 MIT 开源协议托管在 Github 上。任何个人或公司都可以免费下载使用。

       获取更多详细信息，访问以下链接：

       /jekip/naive...

HelloElectron——引入NaiveUI、Pinia简单美化（四）

       本文内容聚焦于在Electron项目中引入pinia和naive-ui，以优化界面并提升项目功能。我们通过引入这两个库，实现实时状态管理与界面美化，确保Electron应用在未来的迭代中保持高效与简洁。

       项目链接：Jakentop/plantuml-editor

       Github标签：eedefd1bcbbcfb6cb

       为了使项目更易于扩展和维护，我们决定引入pinia作为状态管理框架。相较于vuex，pinia提供更简洁的API，无需添加mutation就能实现状态转换，这大大提高了开发效率。

       同步引入naive-ui，这是一个优秀的Vue3 UI库，为我们的界面增添现代风格。安装命令为：pnpm install pinia naive-ui

       我们创建专门的pinia目录，以更好地组织与状态相关的代码。由于pinia是前端逻辑的一部分，它将集成到render文件中。

       pinia的使用非常直观，通过定义state和actions，我们能轻松实现状态管理。实例化store对象，就能在业务代码中直接调用，进行状态更新。

       引入naive-ui后，我们关注其在项目中的整合，特别是谷歌源码代码在main.ts中添加pinia和naive-ui的依赖。通过使用naive-ui，我们的界面将呈现出更加美观且响应式的视觉效果。

       针对代码中的一些优化，我们重构了update方法，将编辑器操作与pinia结合，确保每一次状态变化都能被跟踪和记录。同时，我们对界面进行了重新设计，添加了必要的按钮，如Workspace、Preview和Editor等，提供更直观的用户交互体验。

       解决render调用electronAPI时出现的代码提示问题，通过参考官方教程，我们采用TypeScript与electron的协同使用策略，确保项目在运行时的稳定性和兼容性。

       总结，本篇主要聚焦于基础优化和配置工作。接下来的篇章，我们将深入探索使用electron的弹窗功能，实现打开并读取外部文件，同时还将实现通过快捷键刷新Preview等高级功能，进一步提升用户体验。

, 九款值得推荐的 VUE3 UI 框架

       本文推荐几个在年备受推崇的Vue3 UI框架，为开发者提供高效体验。这些框架均在GitHub上有大量用户支持，以下为简介：

       Ant Design Vue

       网站：2x.antdv.com/components...

       Ant Design Vue是一个成熟的框架，简化了用户界面创建过程。其组件适用于多种图标样式、字体和主题，包括黑色主题。框架定期更新多个组件，满足项目大部分需求。热点股源码Ant Design Vue支持SSR，具有复杂组件如数据表、统计框、确认面板、模态和弹窗。在GitHub上拥有k+颗星，每周下载量k，显示其受欢迎程度。

       BalmUI

       网站：next-material.balmjs.com...

       BalmUI基于Material Design，提供Vue插件和指令，以及高度可定制的组件。适用于使用Material Design风格的复杂项目，尤其适合Vue3。

       Wave UI

       网站：antoniandre.github.io/w...

       WaveUI在Vue3发布后迅速适应，提供多个响应快速且美观的组件，包括日历、旋转器等。WaveUI还提供实用程序、可定制性和成熟的表单验证功能，适合企业级Vue3应用。

       Vuestic

       网站：vuestic.dev/

       Vuestic是Vue中非常美观的开源管理面板之一，擅长编写可维护的Vue代码和创建灵活的组件。Vuestic的Vue3版本包含流行的Vuestic Admin UI和更多组件，支持键盘导航，提供多个功能全面、高度可配置的组件，适用于不同屏幕分辨率，提供无缝翻译支持和键盘可访问性。

       Element+

       网站：element-plus.org/#...

       Element+在Vue2中广受欢迎，为Vue3提供了大量组件，涵盖了构建复杂应用所需的内容。它提供成熟的日期、时间选择器、增量爬虫源码树、时间线、日历组件，甚至提供动画、国际化系统等开发所需元素。Element+在GitHub上拥有.1k+颗星，成为最受欢迎的Vue3 UI框架之一。

       Ionic

       网站：ionicframework.com/docs...

       Ionic是最早提供Vue3支持的框架之一，专注于移动UI，提供一个令人印象深刻的社区、大量StackOverflow问题、企业支持和大型Slack频道，为开发者提供便利。Ionic Vue在GitHub上有k+颗星，被许多大公司采用，如Airbus和Electronic Arts。

       Naive UI

       网站：naiveui.com/zh-CN/os-th...

       Naive UI在Twitter上发布后，获得了大量流量。它提供了多个精致的组件，适用于任何Vue3应用，性能优异、高度可定制且支持TypeScript，提供了出色的开发体验。Naive UI的文档易于导航，支持完整的主题定制，可下载并轻松集成到应用中。

       Quasar

       网站：next.quasar.dev/

       Quasar是一个全面、性能导向的框架，可构建Vue用户界面（SPA、PWA、SSR、移动和桌面应用）。Quasar集成Cordova、Capacitor和Electron，无需单独学习即可构建跨平台应用。框架基于Material Design，允许高度定制以适应自定义设计体系。

       PrimeVUE

       网站：primefaces.org/primevue...

       PrimeVUE是最早支持Vue3的框架之一，提供多个组件，涵盖广泛，如仪表、滑块、树、图形、拆分按钮、旋钮、图表等密码表单组件。PrimeVUE集成Vuelidate用于表单验证，并提供预先制作的主题和可视化编辑器，帮助开发者定制主题。

       总结，随着Vue3生态系统的迁移，使用这些UI框架能帮助开发者更快、更灵活地构建项目。它们不仅在GitHub上拥有大量支持，而且各具特色，满足不同项目需求。

深入理解Vue3自定义指令ClickOutside的实现

       深入理解Vue3自定义指令ClickOutside的实现

       本文深入解析自定义指令ClickOutside的实现逻辑与原理，旨在为开发者提供清晰的理解路径。通过工具函数on和off的使用，理解事件绑定与解除绑定的基本操作。此外，介绍了在naive-ui-admin源码中on和off函数的高效应用，以及如何使用它们扩展为一次性事件处理函数once。

       在自定义指令部分，解释了如何利用Vue的指令系统封装满足特定业务需求的指令，如ClickOutside。通过分析指令对象的生命周期钩子函数，特别是mounted、updated和beforeUnmount，以及参数el和binding的作用，展示了指令的定义与使用方式。

       动态参数指令arg的介绍，展示了如何通过指令参数arg实现动态参数的切换，以适应不同的业务需求。利用arg属性，自定义指令可以更灵活地应对不同的场景。

       简易版本实现中，首先定义了指令的事件处理函数eventHandler，并将其绑定到document上。通过判断事件target是否在el元素内，执行对应的处理逻辑。其中，contains函数用于判断节点关系，同时通过el === e.target的判断确保不误触发事件。简易版本最终实现了一个基本的ClickOutside功能。

       针对简易版本的优化，提出将事件绑定到document上，仅在初始化和移除指令时执行，以减少每次绑定和解绑的操作。通过使用Map对象收集所有指令的eventHandler函数，在触发事件时统一执行，同时解决了解绑时寻找每个el对应函数的问题。

       升级优化部分，通过对比VueUse和element-plus的实现逻辑，发现点击事件的触发机制不同，从而改进了简易版本，使其支持鼠标左、中、右键触发。进一步分析了click、mouseup和mousedown事件的区别，使得简易函数能够适应更广泛的用例。

       源码实现逻辑中，详细介绍了naive-ui-admin中ClickOutside指令的实现细节。除了createDocumentHandler函数，其他功能与简易版本的实现相似，关键在于通过匿名闭包引用el和binding，实现指令与事件处理的联动。重点关注createDocumentHandler函数内部的逻辑，以及六个判断条件的使用，确保只有满足特定条件时才会触发对应的处理逻辑。

       总结部分，本文旨在为读者提供一个全面的Vue3自定义指令ClickOutside实现的理解框架，从基本概念到源码细节，逐步深入解析。理解ClickOutside的实现逻辑有助于开发者在实际项目中灵活应用，解决与元素点击范围相关的复杂场景。

两万七千字大章带你使用 Vue3、Vite、TypeScript、Less、Pinia、Naive-ui 开发 Chrome V3 插件

       本文旨在详细介绍如何使用 Vue3、Vite、TypeScript、Less、Pinia和Naive-ui构建Chrome V3插件。首先，通过Vite创建基础的Vue项目，选择Vue和TypeScript作为开发工具。接着，对项目进行修改，添加Chrome插件所需的manifest.json、service-worker、content和popup页面等配置。配置过程中，包括安装chrome-types包，设置Typescript类型，以及调整vite.config.ts以支持manifest.json配置和文件复制。构建项目时，通过pnpm run build命令生成dist文件夹，并在chrome://extensions/加载插件。内容注入、UI库的运用、CSS预处理器和资源的管理也是关键步骤。同时，文章还涵盖了热加载、状态管理、权限配置以及插件模块的监听。最后，总结了整个开发过程和不同阶段的文件结构，以及与React开发插件和第三方工具的对比。源码可在作者日升的Juejin文章中获取。

适用于Vue 3的高颜值UI组件库！

       Element Plus

       Element Plus是基于Vue 3.0的组件库，使用TypeScript和Composition API重构，提供了完整类型定义文件。Vue 3.0下的Composition API降低了耦合度，简化了逻辑。Lerna用于维护和管理项目，支持种国际化语言，并具备黑暗模式功能。

       考虑到Vue 3.0不支持IE，Element Plus同样不再支持IE浏览器。

       Ant Design Vue

       Ant Design Vue是Ant Design的Vue版本，专为大型企业级后台产品打造。它支持服务端渲染，适合在Electron环境中使用。

       Naive UI

       Naive UI是由图森未来开源的UI组件库，基于Vue 3.0和TypeScript开发。它具有强大的功能，包括按需引入、暗黑模式、主题定制和国际化支持。

       Varlet

       Varlet是一个Material风格的移动端组件库，基于Vue3开发，支持TypeScript、按需引入、暗黑模式、主题定制和国际化。社区团队负责维护，提供VS Code插件以提升开发体验。

       NutUI

       NutUI是由京东开发的移动端Vue2和Vue3组件库，支持一套代码生成H5和小程序，具备多种功能。

       Vant

       Vant是由有赞出品的轻量、可靠的移动端组件库，提供Vue 2、Vue 3版本和微信小程序版本，功能全面。

       Arco Design

       Arco Design是由字节跳动出品的基于Arco Design的Vue UI组件库，包含多个开箱即用的高质量组件，覆盖大部分业务场景。

       Github：github.com/arco-design/...