1.适用于Vue 3的高颜值UI组件库！
2.Naive Ui Admin前端集成框架
3.深入理解Vue3自定义指令ClickOutside的实现
4.两万七千字大章带你使用 Vue3、Vite、TypeScript、Less、Pinia、phpapi源码代码库Naive-ui 开发 Chrome V3 插件
5.2021, 九款值得推荐的 VUE3 UI 框架

适用于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是java connection源码一个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/...

Naive Ui Admin前端集成框架

       Naive Ui Admin是一个中后台前端解决方案，基于vue3、vite2和TypeScript，结合使用了Naive Ui组件库。其风格统一，组件全面，提供了便捷的开发工具，让开发者能够轻松上手。该框架正在不断发展，4399填表源码添加更多功能。

       该框架的特性包括了页面功能、系统看板、页面组件以及ProTable的展示效果。使用账号admin和密码进行体验。

       在安装使用方面，推荐使用Chrome浏览器版本及以上。该框架兼容现代浏览器，不支持IE浏览器。

       具体的浏览器支持情况如下表所示：

       | | IE | Edge | Firefox | Chrome | Safari |

       | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

       源码地址：github.com/jekip/naive...

深入理解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文章中获取。

, 九款值得推荐的 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上拥有大量支持，而且各具特色，满足不同项目需求。