大家好，我是前端宝哥。
自2014年2月 Vue 问世以来， 它已经成为了JavaScript界的明星，是构建和维护Web应用的顶级框架之一。Vue之所以受到许多开发者的青睐，是因为它简单易学、性能优异，而且非常灵活，非常适合用来搭建各种规模的应用。
选择Vue来构建你的应用后，下一步就是挑选合适的工具和库来帮你快速开发。多年来，Vue不断推陈出新，比如引入了Composition API，为开发生态带来了不少令人兴奋的新东西。下面咱们来看看现在社区里流行的一些工具和库。
入门Vue
有三种主要的方法来搭建你的Vue应用：
内容分发网络（CDN）
构建工具
使用像Nuxt这样的元框架
CDN
大多数JavaScript框架都需要搭配构建工具才能使用，但Vue的妙处在于，你可以直接在网页上引入它，完全不需要构建工具。
<!-- unpkg -->
<script src="<url id="" type="url" status="" title="" wc="">https://unpkg.com/vue@3/dist/vue.global.js"></script></url>
<!-- jsdelivr -->
<script src="<url id="" type="url" status="" title="" wc="">https://cdn.jsdelivr.net/npm/vue@3.4.25/dist/vue.global.min.js"></script></url>或者，如果你已经在使用ES模块，也可以这样使用：
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
// 或 'https://esm.sh/vue'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>想了解更多信息，请查看官方文档。
构建工具
当你的应用需要用到构建工具（比如Vite、Rollup或webpack）的时候，或者你想使用单文件组件（*.vue），那么我推荐你用Vite来搭建Vue 3项目。Vite之所以流行，是因为它利用了浏览器原生支持ES模块的优势，并且现在JavaScript工具的趋势是编译成原生语言。
Vite背后的男人是Evan You（也就是Vue的创始人），所以用Vite来搭建Vue项目自然是水到渠成。
npm create vue@latest想了解更多关于如何使用Vite创建Vue应用的信息，请查看官方文档。
元框架
对于那些想把Vue用在更广阔天地的开发者，比如静态网站生成（SSG）、服务器端渲染（SSR）等，可以考虑使用像Nuxt这样的元框架来搭建项目。
npx nuxi@latest init <project-name>想了解更多信息，请查看官方Nuxt入门文档。
话虽如此，这里还有两个我想特别提及的选项：
元框架
VitePress
一个极好的静态网站生成器，使用Markdown在几分钟内创建漂亮的文档（同时由Vue主题提供，易于定制）。
元框架
Quasar
一个跨平台的Vue元框架，开箱即带很多东西，如Material组件、各种构建模式等。
路由
当涉及到Vue中的路由解决方案时，选择很简单，因为Vue有一个官方的路由库，但元框架也可以提供帮助。
Vue Router
这是Vue的官方路由器。表达性强、可配置且方便。
Nuxt
对于喜欢基于文件的路由的人来说，当你使用Nuxt时，你会在不需要额外配置的情况下自动获得与Vue Router联合的路由。
如果你对Vue Router的一个新兴扩展感兴趣，它允许你使用TS支持进行基于文件的路由，请务必关注unplugin-vue-router！
状态管理
与路由类似，Vue通过提供官方库来简化状态管理，但由于状态管理更特定于应用的需求以及团队处理它的方式，这里是社区中一些流行的选项。
Pinia
Pinia，以前称为Vuex，是Vue的官方状态管理库。除了对TypeScript友好外，它还从传统的redux模式迈出了一大步，通过消除显式定义mutation的需要。换句话说，代码更少，但仍然具有声明性！
XState
对于熟悉状态机的人来说，你会想看看XState作为管理应用状态的选项。作为奖励，一个出色的团队支持它，并一直是社区中持续的最爱。
TanStack Query
开发者在状态管理中面临的一个主要挑战是关于异步调用中细粒度状态管理。TanStack Query是社区中帮助管理这一点的流行选择。
Composables
随着Composition API的加入，Vue使开发者能够更容易地使用composables创建自己的状态管理解决方案。虽然这在某些场景中可能有用，但建议使用像Pinia这样的标准，以确保团队之间的一致模式。
组件库
选择合适的组件库取决于你的应用需求。以下是一些旨在提供可访问组件并得到良好英文文档支持的流行库。
PrimeVue
一个强大且灵活的组件库，包含风格化和非风格化的组件，以满足你的应用需求。
Radix Vue
用于构建高质量的设计系统和Vue Web应用的非风格化和可访问组件。
Quasar Components
遵循Material Guidelines的UI组件，适用于使用Quasar的人。
Vuetify
在Vue社区中长期受欢迎的Material组件，文档出色。
NuxtLabs UI
为使用Nuxt的人提供的完全风格化和可定制组件。
荣誉提名
Buefy
对于喜欢Bulma的人，这个库正在积极为Vue 3开发。
Element Plus
由Element团队制作的Vue 3 UI库，拥有强大的中英文社区。
BootstrapVue
对于喜欢Bootstrap的人，它在发布时还没有完全准备好Vue 3，但请关注这个库。
Vuestic UI — Vue 3 UI framework
Vue 3的免费开源UI库。
测试
当涉及到测试你的应用时，这里是社区正在使用的快速概览。
单元测试
Vitest
这里没有竞争。由于大多数Vue项目都是基于Vite的，与之前的单元测试库如Jest相比，性能提升是不可忽视的。
组件测试
根据你的用例，有三种主要的组件测试选项：
Vitest
Vitest非常适合渲染无头组件或可组合组件。
Vue Testing Library
Vue Testing Library是一个轻量级的解决方案，用于测试Vue组件，它在@vue/test-utils之上提供了轻量级的实用函数。
Vue Test Utils
Vue Test Utils是另一个测试组件和DOM的选项。
Cypress Component Testing
Cypress非常适合测试预期行为依赖于正确渲染样式或触发原生DOM事件的组件。
E2E测试
尽管其他测试很棒，但我的一位导师喜欢说，对于任何代码库，只有两个测试是真正重要的。
用户能登录吗？
用户能付款给我们吗？
其他都是可选的。
这就是端到端（E2E）测试的用武之地。在选择E2E测试框架时，有两个主要的候选者：
Cypress
Cypress一直是社区的最爱，它具有直观的API和直接在浏览器中运行和调试测试的能力。
Playwright
Playwright也成为了社区中另一个受欢迎的选择，因为它能够使用单一API跨任何浏览器或平台进行测试。
有关Vue测试的更多阅读，请查看官方文档。
移动开发
Capacitor
你可能熟悉Ionic，这是一个流行的开源UI工具包，用于使用Web技术构建移动应用。那么，Capacitor是Ionic构建的基础，它使你能够构建实际的应用。
它也得到了一个团队的支持，他们一直是Vue社区的伟大合作伙伴。如果你想用Vue构建移动应用，绝对值得一试。
你可以在他们的官方Capacitor + Vue文档中了解更多信息。
NativeScript
如果你想找一个Vue中的React Native等价物，虽然没有核心团队的官方支持，但NativeScript是一个用JavaScript构建真正的原生移动应用的解决方案。
注意： 它目前在发布候选版（RC），尚未正式准备好投入生产，但它曾是Vue 2应用的过去最爱，所以它被列为Capacitor的替代品。
想了解更多或跟进，请查看官方NativeScript仓库。
额外的库
这些库没有自己的特定类别，但我想特别提及以下库：
VueUse
在实用程序库方面，VueUse获得了MVP奖项，因为它提供了令人难以置信的有用抽象集合，用于常见的功能，如复制到剪贴板、深色/浅色模式、本地存储等。
Petite-Vue
对于那些只需要Vue功能子集并只想在页面上添加一些交互性的人，你绝对想看看petite-vue，它只有~6kb！
FormKit
表单是大多数Web应用的重要组成部分，不管你喜欢与否。FormKit是一个旨在通过提供表单结构、生成、验证等标准，使过程更轻松的库。
TresJS
TresJS是一个库，旨在使使用Three.js和Vue构建3D体验变得更容易。
展望
选择适合你团队和应用的解决方案是最重要的。如果你们正在使用的解决方案没在这个列表上，那也没关系。
记住，工具和库的生态是不断变化的，总有新思想和改进的空间。社区始终欢迎贡献，期待将来能推荐你构建的东西！
往期推荐
Vue 神器，支持自动生成路由，从此告别繁琐的手动路由配置！
Vue 单页面应用中，不要在 onMount 里添加事件监听器！
38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集
最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。
关注我，明天见！
⭐星标前端开发博客，好内容不错过⭐
觉得好看，请关注我，点“在看”
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
