6個實用的Vue3相關生態（總結分享）

這篇文章帶大家整理分享一些實用的vue相關生態，希望對大家有幫助！

1、Vue 外掛程式庫

Vue 外掛程式庫收集了最新、最完整的Vue外掛程式和提供各種Vue外掛程式的詳細使用方法，支援線上預覽，Vue 外掛程式下載。 （學習影片分享：vue影片教學）

官方網址：https://www.vue365.cn/

##vue插件庫旨在為Web和行動應用程式開發人員提供最新的免費Vue.js元件和插件。

2、Pinia

輕量級狀態管理庫，API 設計更接近Vuex 5的提案，也是Vue核心團隊推薦的狀態管理庫，同時支援 Vue2 和 Vue3。

官方地址：https://pinia.vuejs.org/

特性##Pinia具有以下幾點特性：

直觀，像定義components一樣定義store
完整的Typescript支援
去除mutations，只有state，getters，actions
actions支援同步和非同步
Vue Devtools支援Pinia，提供更好的開發體驗
能夠建構多個stores ，並實現自動地程式碼拆分
極為輕量（1kb），甚至感覺不到它的存在

使用Pinia 獲得可很多好處：

開發工具支援

• 追蹤動作、突變的時間表
  • 商店出現在使用它們的元件中
  • 時間旅行和更容易的調試
熱模組更換

• 在不重新載入頁面的情況下修改您的商店
  • 在開發時保持任何現有狀態
外掛程式：使用外掛程式擴充Pinia 功能
為JS 使用者提供適當的TypeScript 支援或
• 自動完成功能

伺服器端渲染支援

3、Nuxt Modules由Nuxt團隊和社群創建， 了解我們的模組列表，以增強您的Nuxt專案。

官方網址：https://modules.nuxtjs.org/
github網址：https://github.com/nuxt/ modules

4、Nuxt 3

##輕量應用框架，可用於創建服務端渲染 (SSR) 應用程式

官方網址：https://v3.nuxtjs.org/

中文文件：https://www.nuxtjs.org.cn/

整合vite vue3 composition api ts、CLI、DevTools、Nuxt Kit表明，這是一個體系完整的通用開發框架，能提供良好的程式碼組織、極高的開發效率、開發體驗和服務端渲染/靜態網站生成（SSR/SSG）能力，這才是硬核！

Nuxt 3新特性

Nuxt 3 的重構精簡了內核，並且讓速度更快，開發體驗更好。

更輕量

• 以現代瀏覽器為目標的情況下，伺服器部署和用戶端產物最多可達 75 倍的減少。
  更快
• 用動態服務端程式碼分割來最佳化冷啟動，由 nitro 提供能力。
  Hybrid
• 增量靜態產生和其他進階模式現在都成為可能。
  Suspense
• 導航前後皆任何元件中取得資料。
  Composition API
• 使用 Composition API 和 Nuxt 3 的 composables 實作真正的可重複使用性。
  Nuxt CLI
• 全新的零依賴體驗，協助您輕鬆建置專案與整合模組。
  Nuxt Devtools
• 更多的資訊和快速修復，在瀏覽器中有效運作。
  Nuxt Kit
• 全新的基於 TypeScript 和跨版本相容的模組開發。
  Webpack 5
• 更快的建置速度和更小的建置產物，並且零配置。
  Vite
• 用 Vite 作為你的打包器，體驗輕量級的快速 HMR。
  Vue3
• Vue3 會成為您下一個應用程式的堅實基礎。
  TypeScript
• 由原生 TypeScript 和 ESM 所構成 —— 沒有額外的步驟。

5、vuepress

#vuepress是一個基於vue的靜態網站產生器，可以用來寫文件的。

官方網址：https://v2.vuepress.vuejs.org/zh/

vuepress 是Vuejs 官方提供的一個是Vue驅動的靜態網站產生器，基於Markdown語法產生網頁。簡單的說它就是一個快速建立文檔站點的工具，在簡單配置好功能後，需要做的事情就剩下寫好一個個 Markdown 文檔，並且可以將其發佈到github。

特性(features)

• 內建markdown 擴展，針對技術文件進行了最佳化

• 能夠利用內嵌在markdown 檔案中的Vue 程式碼

• 以Vue 驅動的自訂主題系統

• PWA 支援

• #Google Analytics 整合

• 一個預設主題：

  • 響應式佈局

  • #可選的主頁

  • 簡單、開箱即用、基於標題的搜尋功能

  • ##可自訂的導覽列和側側邊欄

  • 自動產生的GitHub 連結和頁面編輯連結

6、VueUse

強大的 Vue 組合實用程式集合，是基於Composition API 實現的基本Vue 組合實用函數的集合。

官方網址：https://vueuse.org/

github網址：https://github.com/vueuse/vueuse

VueUse 透過vue-demi 的強大功能，可以在一個套件中同時適用於Vue2 和 Vue3！

Vue 3 Demo：

• 使用vite：https://github.com/vueuse/vueuse-vite-starter

• 使用Webpack：https://github.com/vueuse/vueuse-vue3-example

Vue 2 Demo：Vue CLI

• 使用Vue CLI：https://github.com/vueuse/vueuse-vue2-example

另外，要注意庫的版本：

從v6.0 版本起，vue3 需要vue >= v3.2；vue2 需要依賴

@vue/composition-api>@vue/composition >= v1.1

【相關影片教學推薦：

vuejs入門教學、web前端入門】

以上是6個實用的Vue3相關生態（總結分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！