首頁  >  文章  >  web前端  >  6個實用的Vue3相關生態(總結分享)

6個實用的Vue3相關生態(總結分享)

青灯夜游
青灯夜游原創
2022-10-19 17:00:462686瀏覽

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

1、Vue 外掛程式庫

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

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

6個實用的Vue3相關生態(總結分享)

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

2、Pinia

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

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

6個實用的Vue3相關生態(總結分享)

特性##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

6個實用的Vue3相關生態(總結分享)

4、Nuxt 3

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

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

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

整合vite vue3 composition api ts、CLI、DevTools、Nuxt Kit表明,這是一個體系完整的通用開發框架,能提供良好的程式碼組織、極高的開發效率、開發體驗和服務端渲染/靜態網站生成(SSR/SSG)能力,這才是硬核! 6個實用的Vue3相關生態(總結分享)

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/

6個實用的Vue3相關生態(總結分享)

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

6個實用的Vue3相關生態(總結分享)

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn