當前位置: 妍妍網 > 碼農

2024 年 Vue 官方生態最全整理!

2024-04-24碼農

未經授權,禁止轉載,轉載請註明出處!

經過多年的不斷演進,Vue 已經構建了一個極為豐富且強大的生態系,今天就來盤點 Vue 官方生態系中那些好用的工具!

框架

Vue 有兩個主要的程式碼倉庫:

  • Vue 2:

  • 介紹:目前已經停止維護。

  • Github: https://github.com/vuejs/vue

  • Vue 3:

  • 介紹:官方推薦並且在積極維護更新的預設的 Vue 版本。

  • Github: https://github.com/vuejs/core

  • 除此之外,還有即將推出的 無虛擬 DOM 版 Vue 3 的倉庫 https://github.com/vuejs/core-vapor

    腳手架

    Vue 官方生態中有兩個腳手架:

  • vue-cli:

  • 介紹:基於 Webpack 的 Vue 計畫腳手架,目前處於維護狀態,不在積極更新;

  • Github: https://github.com/vuejs/vue-cli

  • create-vue:

  • 介紹:基於 Vite 的 Vue 計畫腳手架,同時支持 Vue 2 和 Vue 3,它是 Vue 官方推薦的 Vue 腳手架。

  • Github: https://github.com/vuejs/create-vue

  • 狀態管理

    Vue 官方生態中有兩個狀態管理工具:

  • Pinia:

  • 介紹:官方推薦的直觀、型別安全且靈活的 Vue 狀態管理工具,支持在 Vue 2 和 Vue 3 中使用,比 Vuex 更輕量;

  • Github: https://github.com/vuejs/pinia

  • Vuex:

  • 介紹:老牌 Vue 狀態管理工具,目前處於維護狀態,不會在新增功能

  • Github: https://github.com/vuejs/vuex

  • 路由

    Vue 的官方路由器是 Vue Router,有兩個程式碼倉庫:

  • vue-router:

  • 介紹:vue-router 3 的程式碼倉庫,僅適用於 Vue 2.0。

  • Github: https://github.com/vuejs/vue-router

  • router:

  • 介紹:vue-router 4 的程式碼倉庫,適用於 Vue 3。

  • Github: https://github.com/vuejs/router

  • 構建

    Vue 官方生態中有兩個構建工具:

  • Vite:

  • 介紹:Vue 官方推薦的下一代前端構建工具。

  • Github: https://github.com/vitejs/vite

  • Rolldown:

  • 介紹:基於 Rust 的快速打包器,相容 Rollup 的 API,目前處於積極開發中,尚未用於生產,後續會作為 Vite 的底層工具以及單獨的打包器來使用。

  • Github: https://github.com/rolldown/rolldown

  • 開發&偵錯

    Vue 官方生態中的開發和偵錯工具包括:

  • Vue - Official:Vue 的官方 VS Code 外掛程式,原名為 Volar,於近期改名。

  • Vue DevTools:旨在增強 Vue 開發人員體驗的工具,可以透過 Vite 外掛程式、瀏覽器擴充套件、獨立套用的形式來使用。

  • eslint-plugin-vue:Vue.js 的官方 ESLint 外掛程式。

  • 測試

    Vitest 是 Vue 官方測試工具,它是由 Vite 提供支持的下一代測試框架。

    Github: https://github.com/vitest-dev/vitest

    整合

  • vuefire:

  • 介紹:Vue.js 的 Firebase 繫結,適用於 Vue >=2.7 和 Vue 3。

  • Github: https://github.com/vuejs/vuefire

  • apollo:

  • 介紹:VueJS 的 Apollo/GraphQL 整合

  • Github: https://github.com/vuejs/apollo

  • 靜態站點生成器

    Vue 官方生態中有兩個靜態站點生成器:

  • VuePress:

  • 介紹: https://github.com/vuejs/vuepress

  • Github:簡約 Vue 驅動的靜態站點生成器,目前處於維護狀態

  • VitePress:

  • 介紹:構建在 Vue 3 + Vite 之上的下一代基於 Vue 的靜態站點生成器,專為構建快速、以內容為中心的網站而設計。

  • Github: https://github.com/vuejs/vitepress

  • 元框架

    Nuxt 不是 Vue 團隊開發的,但也是基於 Vue 的唯一元框架了,其目標是以直觀且可延伸的方式使用 Vue.js 建立型別安全、高效能和生產級的全棧 Web 套用和網站。

    Github: https://github.com/nuxt/nuxt

    實用工具

    Vueuse 團隊成員 Antfu 開發的基於 Composition API 的實用函式集合,適用於 Vue 3 和 Vue 2,包含 200+ 實用函式(類似於Hooks)。

    Github: https://github.com/vueuse/vueuse

    Awesome

    Awesome Vue 是與 Vue.js 相關的精彩內容的精選列表。

    Github: https://github.com/vuejs/awesome-vue

    往期回顧