首頁 >web前端 >Vue.js >vue開發工具有哪些

vue開發工具有哪些

青灯夜游
青灯夜游原創
2021-10-27 15:45:0031402瀏覽

vue開發工具有:1、Vue CLI;2、Vue Press;3、Vuex;4、Nuxt;5、Vuetify;6、Quasar;7、Storybook;8、Visual Studio Code;9、WebStorm等等。

vue開發工具有哪些

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

現在前端除了JavaScript外,還有react,vue,angular這三個框架在市場上用的比較多,可以說這三個框架很大程度上改變了前端的地位,相對於angular來說,vue同樣擁有豐富的指令,並且都是典型的MVC框架,vue相對來說輕量級一些,

目前vue被很多開發人員所採用,也越來越熱門,,因此它的生態環境也變得完善起來,相關的工具也很豐富,這主要是依靠vue的學習曲線和清晰的設計結構和使用文檔,是讓有經驗的開發人員從其他框架方便入手。以下跟大家介紹vue的開發工具有哪些?

Vue CLI

為了方便開發者快速的上手工作,他和奇特的框架一樣,都是提供CLI類似的手腳架工具,VueCLI是一套功能齊全的工具,能用快速Vue開發,Vue將Vue生態中的工具基礎標準化,確保了各種構建工具能夠基於智能的默認配置平穩銜接,這樣就可以專注在撰寫應用上,而不必花好久的時間去糾結設定問題,例如在專案中能夠很輕鬆的整合Babel,TypeScript, ESLint,PostCSS ,Jest,Mocha , Nightwatch和Cypress等外掛程式。

Vue Press

VuePress是以Vue驅動的靜態網站產生器,是由Vue, Vue Router和webpack驅動的單頁應用,在VuePress中,可以使用Markdown編寫文檔,然後生成網頁,每個由VuePress生成的頁面都有著預渲染好的HTML,也因此具有非常好的加載性能和搜索引擎優化,同時,一旦頁面被加載,Vue將會接管這些內容,並把他轉換成一個完整的單頁應用,其他的頁面則只會在用戶瀏覽到的時候才需加載,

##Vuex

在SPA單頁元件的開發中Vue的vuex和React的React都是統稱為同一狀態管理,也可以叫全域狀態管理,簡單的理解就是你在state定義了一個資料之後,就可以在所在專案中的任何一個元件裡進行獲取,進行修改,並且修改部分可以得到全局的響應變化,每一個Vuex應用的核心就是Store,store可當做一個容器,包含著應用中大部分狀態。

Nuxt

Nuxt.js是一個基於Vue.js的輕量級應用框架,可用於建立服務端渲染應用,也可以充當靜態網站引擎生成靜態網站應用,具有優雅的程式碼​​結構分層和熱載入等特性。

Vuetify

Vuetify目前是基於veu的最好的UI元件庫之一,他提供了大量基於Material Design規範盡心製作的元件,可以滿足任何應用程式的需求。

Quasar

Quasar是MIT許可的開元框架是基於Vue的,可以幫助Web開發人員創建響應式網站,PWA 透過Apacha Cordova建立行動APP,多平台應用程式Quasar約需開發人員編寫一次程式碼,然後使用相同的程式碼庫同時部署為網站,PWA , Mobile APP和Electron App。使用最先進的CLI設計應用程序,並提供精心編寫,是速度非常快的Quasar Web組件,

#Storybook##對於前段來說,組件化技術已經是必修的一門課程了,這其中又以react和vue為主,但平時在開發組件,尤其是公共組件或第三方組件時會有些困擾,

    不能很好的管理元件,預覽元件時不能一目了然,也不能很好的反應一個元件的不同狀態,
  • 自動化互動測試可以使用enzyme,但很多時候還得手動測試,
  • 在寫文件時需要將元件預覽和文件寫在一起,並需要切換不同狀態,
  • 所以,storbook就是為了解決這些問題而出現,他能為元件搭建一個強大的開發環境,主要提供下面幾點

    #提供一個強大的UI元件管理頁面,可以很便捷,清晰的分組,管理多個元件或一個元件的不同狀態
  • 在自動化互動測試外,可以很方便的進行手動互動測試,並且可以動態改變元件參數,查看視圖變化
  • 可以將元件預覽匯出為靜態資源,這樣就可以很方便查看元件的文件和不同參數對應的不同視圖還有一系列插件,更好的幫助我們完成開發測試最佳化組件工作。

該工具使用開發人員能夠獨立於主應用程式元件,並在隔離的開發環境中已互動方式展示他們,而無需擔心特定有應用程式的依賴關係和要求,方便開發人員,設計人員等多人參與專案。

Visual Studio Code

Visual Studio Code(簡稱「VS Code」)是Microsoft在2015年4月30日Build開發者大會上正式宣布一個運行於Mac OS X、Windows和 Linux 之上的,針對於編寫現代Web和雲端應用的跨平台原始碼編輯器,可在桌面上運行,並且可用於Windows,macOS和Linux。它具有對JavaScript,TypeScript和Node.js的內建支持,並具有豐富的其他語言(例如C ,C#,Java,Python,PHP,Go)和運行時(例如.NET和Unity)擴展的生態系統。

WebStorm

WebStorm 是JetBrains公司旗下一款JavaScript 開發工具。已被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最聰明的JavaScript IDE」等。與IntelliJ IDEA同源,繼承了IntelliJ IDEA強大的JS部分的功能。

相關推薦:《vue.js教學

以上是vue開發工具有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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