国产精品福利自产拍在线观看,国产原创中文无码精品视频,岛国av无码精品一区二区三区,人人妻妻人人

  1. 云科研首頁
  2. 科研百科

10 個實用的 Vue.js 工具和庫（vue.js ui庫）

投稿用戶 ? ? 科研百科 ? 閱讀 48

如今 Vue 的熱度不斷攀升，使用者越來越多，Vue.js 工具也隨處可見。這種現(xiàn)象不是憑空產(chǎn)生的：Vue 的學習曲線友好，功能驅(qū)動的結(jié)構(gòu)清晰易懂，文檔出色易學，所以新人入門很容易，經(jīng)驗豐富的開發(fā)人員也可以快速從其他框架（如 React 或 Angular）切換過來。

只要你認真對待 Vue 的開發(fā)工作，逐漸就會發(fā)現(xiàn)很多優(yōu)秀的基礎工具和庫。這些工具將點亮你的 Vue 開發(fā)職業(yè)生涯，讓你渾身上下散發(fā)專業(yè)氣息。

本文總結(jié)了一些最值得關注的工具和庫，相信你遲早會用在自己的 Vue.js 項目中。同類文章經(jīng)常只會列舉一些 UI 組件庫，而本文涉及的范圍更廣，探討了 Vue 生態(tài)系統(tǒng)中的一系列工具、庫和插件。

我的選擇是基于實用性、有效性和獨特性等原則——而不是它們的 GitHub 受歡迎程度或星級評分。

閑話不提，我們先來看 Top10。

1、Vue CLI

0

似乎現(xiàn)在每款 JavaScript 應用程序框架都必須使用某種 CLI 工具，Vue 也不例外。Vue CLI 是針對快節(jié)奏 Vue 開發(fā)打造的一套功能齊全的工具。除了常見的項目骨架之外，它還有方便的即時原型制作功能，你無需創(chuàng)建完整項目就可以嘗試新的創(chuàng)意。

Vue CLI 直接支持各種主流 Web 開發(fā)工具和技術，如 Ba??bel、TypeScript、ESLint、PostCSS、PWA、Jest、Mocha、Cypress 和 Nightwatch 等。這主要歸功于它的可擴展插件系統(tǒng)。這意味著社區(qū)可以構(gòu)建和共享可復用的插件以滿足常見需求。

Vue CLI 強大的 GUI（Vue UI，它隨 CLI 一起提供）則為其錦上添花。在其幫助下你可以輕松創(chuàng)建并直接配置和管理項目。

?VueCLI（ https://cli.vuejs.org/ ）

2、VuePress

0

VuePress 是 Vue 生態(tài)系統(tǒng)中的另一大重頭戲。它是一個基于 Vue 的靜態(tài)站點生成器，最初是用來編寫技術文檔的工具，現(xiàn)在則發(fā)展成為一個小巧、緊湊、功能強大的無頭 CMS。從版本 1.x 開始，它提供了出色的博客功能和強大的插件系統(tǒng)。它有一個默認主題（適用于技術文檔），但你也可以構(gòu)建自定義主題或使用社區(qū)中的預制主題。

在 VuePress 中，你使用 Markdown 編寫內(nèi)容，然后將其轉(zhuǎn)換為預渲染的靜態(tài) HTML 文件。這些文件加載完畢后，你的站點就成為了由 Vue、Vue Router 和 Webpack 支持的單頁應用程序。

VuePress 的一大好處就是你可以在 Markdown 文件中包含 Vue 代碼或組件，帶來了強大的功能和靈活性。你可以像開發(fā)普通的 Vue 應用程序一樣開發(fā)你的網(wǎng)站，并充分利用 Vue 應用的種種優(yōu)勢。

?VuePress（ https://v1.vuepress.vuejs.org/ ）

3、Gridsome

0

Gridsome 與 VuePress 有許多相似之處，但前者在處理數(shù)據(jù)源時采用了另一種非常強大的方法。你可以用它在應用程序中連接和使用許多不同類型的數(shù)據(jù)，然后將這些數(shù)據(jù)統(tǒng)一到一個 GraphQL 層中?；旧蟻碚f，Gridsome 用 Vue 提供前端功能，并使用 GraphQL 管理數(shù)據(jù)。其工作機制可總結(jié)為以下三個步驟：

  1. 你負責提供 Markdown、JSON、YAML 或 CVS 數(shù)據(jù)格式的內(nèi)容，或從 WordPress 或 Drupal 等 CMS 導入內(nèi)容。
  2. 內(nèi)容會被轉(zhuǎn)換為 GraphQL 層，該層負責中心化數(shù)據(jù)管理。然后你基于這些數(shù)據(jù)用 Vue 構(gòu)建應用程序。
  3. 你將預渲染的 HTML 文件部署到靜態(tài) Web 主機或 CDN 上，如 Netlify、Amazon S3、 Now.sh 、Surge.sh 等。

Gridsome 提供了一些開箱即用的最佳實踐，如代碼分割、資產(chǎn)優(yōu)化、漸進式圖像和鏈接預取等。所以 Gridsome 用起來很快，而且對 PWA 支持完善，對 SEO 也很友好。

?Gridsome（ https://gridsome.org/ ）

4、Vuex

0

開發(fā)人員構(gòu)建 Web 應用程序時面對的一大問題就是狀態(tài)管理。為了解決這個問題，Vue 提供了一個狀態(tài)管理系統(tǒng)——Vuex。它負責集中存儲應用程序中的所有組件，確保狀態(tài)只能以可預測的方式變化。一個存儲區(qū)是一個特殊的對象，分為四個部分：

  • state – 存儲應用數(shù)據(jù)的對象。
  • getter – 包含用來抽象狀態(tài)訪問的方法的對象。
  • mutation – 包含直接影響狀態(tài)的方法的對象。
  • action – 包含用來觸發(fā)突變和執(zhí)行異步代碼的方法的對象。

存儲區(qū)也可以分割為多個模塊以提高可維護性。

?Vuex（ https://vuex.vuejs.org/ ）

5、Nuxt

0

Nuxt 是常用的服務端渲染（SSR）方法。這個框架簡潔而直觀，可用來構(gòu)建各種應用程序。它也是模塊化的，因此你可以只使用應用程序所需的那些模塊。

你可以使用 Nuxt 創(chuàng)建服務端渲染的應用程序（SSR）、單頁面應用程序（SPA）、漸進式 Web 應用（PWA），或者只用作作靜態(tài)站點生成器。

簡而言之，Nuxt 簡化了構(gòu)建和優(yōu)化應用程序的流程，為你提供簡潔而愉快的開發(fā)體驗。

?Nuxt（ https://nuxtjs.org/ ）

6、Vuetify

0

Vuetify 是最好用的 UI 組件庫之一。它提供了大量基于 Material Design 規(guī)范精心制作的組件（80 ），足以滿足任何應用程序的需求。

你可以用它來構(gòu)建 SSR 應用程序、SPA、PWA 和移動應用。你可以創(chuàng)建新應用或?qū)⑺鼈兲砑拥浆F(xiàn)有應用中。它有免費和付費版主題可選，你也可以構(gòu)建自己的主題。它還提供了一個系統(tǒng)，讓你可以只選出要用的組件，從而大大減少應用程序的最終大小。

所有 Vuetify 組件都附帶完善的文檔，并提供了清楚的示例。

?Vuetify（ https://vuetifyjs.com/en/ ）

7、Quasar

0

Quasar 是 Java“一次編寫，隨處運行”哲學的 JavaScript 版本。它是一個通用的，基于 Vue 的框架，讓你可以使用相同的代碼庫為不同的平臺編寫應用程序。SPA、PWA、SSR 應用、混合移動應用或多平臺桌面應用，任君選擇！

它帶有出色的文檔和大批兼顧性能和響應性的組件。Quasar 自帶許多最佳實踐（HTML/CSS/JS 壓縮、緩存清除、tree-shaking、源映射、代碼分割與懶加載、ES6 轉(zhuǎn)換、代碼 linting、可訪問性等），因此你可以專注于應用程序的功能實現(xiàn)。它還提供了一個用來輕松搭建新項目的 CLI 工具。

?Quasar（ https://quasar.dev/ ）

8、Storybook

0

Vue 是一個主要基于組件的框架，因此編寫優(yōu)秀、高效的組件對所有開發(fā)人員來說都很重要，而 Storybook 可能就是非常趁手的工具。你可以用它在易用并隔離的環(huán)境中開發(fā)、管理和測試 UI 組件。它使開發(fā)人員能夠獨立于主應用程序創(chuàng)建組件，并在隔離的開發(fā)環(huán)境中以交互方式展示它們，而無需擔心特定于應用程序的依賴關系和需求。

Storybook 提供了大量的附加組件和靈活的 API，可根據(jù)需要自定義你的 storybook。你還可以導出為靜態(tài) Web 應用程序，并將項目部署到 HTTP 服務器上。

?Storybook（ https://storybook.js.org/ ）

9、Vue Apollo

0

最近有很多關于 GraphQL 的討論。如果你很熟悉它，希望將其集成到 Vue 中，那么可以試試 Vue Apollo。這個庫是連接 Vue 和 GraphQL/Apollo 的一座橋梁，用起來順暢愉快。

?VueApollo（ https://vue-apollo.netlify.com/ ）

10、Eagle.js

0

Eagle.js 是一個使用 Vue 構(gòu)建的功能強大、靈活且獨特的幻燈片系統(tǒng)。你可以在演示中創(chuàng)建易復用的組件、幻燈片和樣式。它還支持動畫、主題和交互式小部件，非常適合制作網(wǎng)絡演示內(nèi)容。Eagle.js 有一個簡單且可調(diào)整的 API，因此你可以自由地制作所需的幻燈片。

這個庫最方便的一項功能之一是將一張幻燈片放在單獨的一個文件中，然后就能在其他幻燈片中重復使用了。你還可以將特定演示文檔中的幻燈片導入另一個文檔里。在這樣強大的工具幫助下，你就可以制作復雜、可交互且吸引人的演示文稿。

?Eagle.js（ https://github.com/zulko/eagle.js/ ）

另外 5 款值得關注的 Vue 工具和庫

  • Vue DevTools 是一個很棒的瀏覽器擴展，用于調(diào)試 Vue 和 Vuex 應用程序。（https://github.com/vuejs/vue-devtools ）
  • Vue Test Utils 是一組用于測試 Vue 組件的好用的工具。（ https://github.com/vuejs/vue-test-utils ）
  • Vue Router 是 Vue 官方出品的路由器。（ https://github.com/vuejs/vue-router ）
  • Vue Native 是一個用于移動應用程序的 JavaScript 框架，類似于 React Native。（ https://vue-native.io/ ）
  • Weex 是一個使用現(xiàn)代 Web 技術（包括 Vue 在內(nèi)）構(gòu)建移動應用程序的框架。（https://weex.apache.org/ ）

小結(jié)

現(xiàn)在有了這么多工具，你就可以構(gòu)建一些精彩的項目了：網(wǎng)站、應用程序、庫、插件……能做的事情還不止這些。去做出一些優(yōu)秀的作品吧！

我個人的知識見聞自然是有限的，我可能會漏掉一些優(yōu)秀的工具和庫，所以還有哪些出色的產(chǎn)品就請在評論里推薦吧。

英文原文： https://www.sitepoint.com/vue-js-tools-libraries/

版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權(quán)，不承擔相關法律責任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。

贊 (0)
上一篇 2024年5月1日 下午1:09
下一篇 2024年5月1日 下午1:20

相關推薦