未經授權,禁止轉載,轉載請註明出處!
經過多年的不斷演進,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