Vue 生态系统（2024版本）自 2014 年 2 月推出以来，Vue 已成为构建和维护 Web 应用程序的最受欢迎的

原文链接：The Vue Ecosystem in 2024, 2024 年 5 月 2 日, by BEN HONG。翻译时有删改。

自 2014 年 2 月推出以来，Vue 已成为构建和维护 Web 应用程序的最受欢迎的 JavaScript 框架之一，因为它有很好的理念：入手简单、性能良好而且功能丰富，可以帮助我们很方便地构建一个可扩展的应用程序。

一旦你选择 Vue 来构建应用程序，接下来就要考虑应使用哪些工具和库来帮助更快地完成功能并交付给用户。虽然这些年来发生了很多变化，但 Composition API 等新功能的添加为生态系统带来了许多令人兴奋的新变化。下面，我们就来看看当前 Vue 社区中流行的一个工具和库吧！

开始使用

构建 Vue 应用程序目前主要有以下 3 种方式：

通过 CDN
通过构建工具
通过元框架（meta-framework），如 Nuxt

CDN

虽然大多数 JavaScript 框架需要构建工具链才能使用，但 Vue 的一大优点是它不需要构建工具，也能直接添加到页面上。

<!-- unpkg -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.25/dist/vue.global.min.js"></script>

或者你可以使用 ES 模块方式引入：

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  // or 'https://esm.sh/vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

你可以查看官方文档，可以了解这块的更多信息。

构建工具

当你的项目准备使用构建工具（例如 Vite、Rollup、webpack），或是要使用单文件组件 (Single-File Components，简称 SFC，以 *.vue 后缀结尾) 时，最好的方式是使用 Vite 创建 Vue 3 项目。

为什么是 Vite？因为它充分利用了现有 Web 生态的发展趋势：浏览器中原生 ES 模块支持，以及使用别的语言编译出来的 JavaScript 打包工具（译注: 是指 Vite 内部使用的打包工具 esbuild，它是使用 Go 语言编写的一款 JavaScript 打包工具）。

另外，Vite 是由 Evan You（Vue 创始人）编写的，最开始是为了搭建 Vue 项目而创建，不过在开发的过程中，发现可以变成一个通用工具，才有了现在的局面。

npm create vue@latest

你可以查看官方文档，了解更多有关使用 Vite 创建 Vue 应用程序的信息。

元框架

对于那些有需求将 Vue 应用扩展到客户端渲染之外其他领域的用户（比如静态站点生成(SSG)、服务器端渲染(SSR)和其他渲染方法），那么就需要使用流行元框架脚手架（比如 Nuxt）。

通过下面的命令就可以创建一个 Nuxt 项目：

npx nuxi@latest init <project-name>

你可以查看Nuxt 官方入门文档，了解更多信息。

与 Nuxt 功能类似的还有一个 Quasar，它也是一个元框架，不过与 Nuxt 只支持 Web 项目不同，Quasar 支持跨平台开发。Quasar 通过内置的构建模式可以让你开发 SPA、SSR、PWA、移动应用程序、桌面应用程序、浏览器扩展在内的各种类型项目。

最后是 VitePress，这是一款 Vite + Vue 驱动的静态站点生成器（替代之前的 VuePress），简单几个 Markdown 文件即可在几分钟内创建很漂亮的文档。

路由

当谈到 Vue 中的路由解决方案时，就是一个比较简单的选择了，因为有官方方案 Vue-Router。

当然，上面介绍的元框架 Nuxt 也内置了路由方案：基于文件的路由。同时，在一个页面中，你也不需要做一些其他配置，就能直接使用 Vue Router 能力。

最后，Vue Router 也即将推出的一个新的扩展 unplugin-vue-router，这个扩展能让你实现获得 TS 支持的同时实现基于文件的路由，有兴趣的同学可以关注或贡献。

状态管理

与路由类似，Vue 也提供了官方状态管理方案，让你能更轻松的管理项目中的全局状态，以下是社区中流行的一些选项。

Pinia

Pinia（以前用 Vuex，不再推荐），是 Vue 的官方状态管理库。除了对 TypeScript 友好之外，无需再显式定义突变（mutations），因此比传统的 Redux 模式实现了巨大的飞跃。换句话说，仍然是声明式代码，但会少些很多。

TanStack Query

开发人员在状态管理方面面临的主要挑战之一是异步调用上下文中的粒度状态管理。TanStack Query 是社区中流行的选择，可帮助管理此问题。

值得一提的是，TanStack Query 前身是 React Query，是 React 社区里很受欢迎的一套方案。在 V4 版本后，被设计成了与框架无关的通用解决方案。

XState

对于熟悉状态机的人来说，你可以会使用 XSt‘ate 来作为你项目管理状态的工具。在 XState 背后，它有一支出色的团队支持，并且一直受到社区的喜爱。

Composables

通过添加 Composition API，Vue 使开发人员能够比以往更轻松地使用组合式函数（Composables）创建自己的状态管理解决方案。虽然这在某些情况下很有用，但建议使用 Pinia 这样的标准来确保跨团队模式的一致。

你可以基于目前项目的现状，有针对性的选择上面适合你团队的解决方案。

组件库

选择正确的组件库取决于你的项目的要求。这里有一些流行的库，为你提供可访问的组件，而且有良好的英文文档的支持。

PrimeVue

PrimeVue 是由 Vue.js 驱动的一套完整 UI 套件，由一组丰富的 UI 组件、图标、块和项目模板构成。通过提供可重用的解决方案来提高开发人员的工作效率，也方便作为内部库进行调整和自定义。

PrimeVue 支持两种模式设计；有样式或无样式。样式模式基于预皮肤组件，具有固执己见的主题，例如 Material、Bootstrap 或 PrimeOne 主题。另一方面，无样式模式将样式留给你，不必担心功能实现和可访问性。无样式模式通过可插拔架构让你在 Tailwind CSS、Bootstrap、Bulma 等 CSS 库或你的自定义 CSS 中选择，从而提供对样式的完全控制，没有边界——这种设计是面向未来的。