1.适用于Vue 3的高颜值UI组件库！
2.Naive Ui Admin前端集成框架
3.深入理解Vue3自定义指令ClickOutside的实现
4.两万七千字大章带你使用 Vue3、Vite、TypeScript、Less、Pinia、java 商城系统 源码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是小米play源码一个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组件库。其风格统一，组件全面，提供了便捷的开发工具，让开发者能够轻松上手。该框架正在不断发展，源码手赚添加更多功能。
该框架的特性包括了页面功能、系统看板、页面组件以及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实现动态参数的切换，以适应不同的Shipyard源码分析业务需求。利用arg属性，自定义指令可以更灵活地应对不同的场景。
简易版本实现中，首先定义了指令的事件处理函数eventHandler，并将其绑定到document上。通过判断事件target是否在el元素内，执行对应的处理逻辑。其中，contains函数用于判断节点关系，同时通过el === e.target的判断确保不误触发事件。简易版本最终实现了一个基本的ClickOutside功能。
针对简易版本的优化，提出将事件绑定到document上，仅在初始化和移除指令时执行，以减少每次绑定和解绑的操作。通过使用Map对象收集所有指令的eventHandler函数，在触发事件时统一执行，同时解决了解绑时寻找每个el对应函数的问题。
升级优化部分，通过对比VueUse和element-plus的实现逻辑，发现点击事件的触发机制不同，从而改进了简易版本，使其支持鼠标左、中、右键触发。进一步分析了click、mouseup和mousedown事件的evince 源码解析区别，使得简易函数能够适应更广泛的用例。
源码实现逻辑中，详细介绍了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上拥有大量支持，而且各具特色，满足不同项目需求。
