vue開發(fā)工具有：1、Vue CLI；2、Vue Press；3、Vuex；4、Nuxt；5、Vuetify；6、Quasar；7、Storybook；8、Visual Studio Code；9、WebStorm等等。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

現(xiàn)在前端除了JavaScript外，還有react，vue，angular這三個(gè)框架在市場(chǎng)上用的比較多，可以說(shuō)這三個(gè)框架很大程度上改變了前端的地位，相對(duì)于angular來(lái)說(shuō)，vue同樣擁有豐富的指令，并且都是典型的MVC框架，vue相對(duì)來(lái)說(shuō)輕量級(jí)一些，

目前vue被很多開發(fā)人員所采用，也越來(lái)越熱門，，因此它的生態(tài)環(huán)境也變得完善起來(lái)，相關(guān)的工具也很豐富，這主要是依靠vue的學(xué)習(xí)曲線和清晰的設(shè)計(jì)結(jié)構(gòu)和使用文檔，是讓有經(jīng)驗(yàn)的開發(fā)人員從其他框架方便入手。下面給大家介紹vue的開發(fā)工具有哪些？

Vue CLI

為了方便開發(fā)者快速的上手工作，他和奇特的框架一樣，都是提供CLI類似的手腳架工具，VueCLI是一套功能齊全的工具，能用快速Vue開發(fā)，Vue將Vue生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化，確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置平穩(wěn)銜接，這樣就可以專注在撰寫應(yīng)用上，而不必花好久的時(shí)間去糾結(jié)配置問(wèn)題，例如在項(xiàng)目中能夠很輕松的集成Babel，TypeScript， ESLint，PostCSS ,Jest,Mocha ， Nightwatch和Cypress等插件。

Vue Press

VuePress是以Vue驅(qū)動(dòng)的靜態(tài)網(wǎng)站生成器，是由Vue, Vue Router和webpack驅(qū)動(dòng)的單頁(yè)應(yīng)用，在VuePress中，可以使用Markdown編寫文檔，然后生成網(wǎng)頁(yè)，每一個(gè)由VuePress生成的頁(yè)面都有著預(yù)渲染好的HTML，也因此具有非常好的加載性能和搜索引擎優(yōu)化，同時(shí)，一旦頁(yè)面被加載，Vue將會(huì)接管這些內(nèi)容，并把他轉(zhuǎn)換成一個(gè)完整的單頁(yè)應(yīng)用，其他的頁(yè)面則只會(huì)在用戶瀏覽到的時(shí)候才需加載，

Vuex

在SPA單頁(yè)組件的開發(fā)中Vue的vuex和React的React都是統(tǒng)稱為同一狀態(tài)管理，也可以叫全局狀態(tài)管理，簡(jiǎn)單的理解就是你在state中定義了一個(gè)數(shù)據(jù)之后，就可以在所在項(xiàng)目中的任何一個(gè)組件里進(jìn)行獲取，進(jìn)行修改，并且修改部分可以得到全局的響應(yīng)變化，每一個(gè)Vuex應(yīng)用的核心就是Store，store可當(dāng)做一個(gè)容器，包含著應(yīng)用中大部分狀態(tài)。

Nuxt

Nuxt.js是一個(gè)基于Vue.js的輕量級(jí)應(yīng)用框架，可用來(lái)創(chuàng)建服務(wù)端渲染應(yīng)用，也可以充當(dāng)靜態(tài)站點(diǎn)引擎生成靜態(tài)站點(diǎn)應(yīng)用，具有優(yōu)雅的代碼結(jié)構(gòu)分層和熱加載等特性。

Vuetify

Vuetify目前是基于veu的最好的UI組件庫(kù)之一，他提供了大量基于Material Design規(guī)范盡心制作的組件，可以滿足任何應(yīng)用程序的需求。

Quasar

Quasar是MIT許可的開元框架是基于Vue的，可以幫助Web開發(fā)人員創(chuàng)建響應(yīng)式網(wǎng)站，PWA 通過(guò)Apacha Cordova構(gòu)建移動(dòng)APP，多平臺(tái)應(yīng)用程序 Quasar約需開發(fā)人員編寫一次代碼，然后使用相同的代碼庫(kù)同時(shí)部署為網(wǎng)站，PWA , Mobile APP和Electron App。使用最先進(jìn)的CLI設(shè)計(jì)應(yīng)用程序，并提供精心編寫，是速度非?？斓腝uasar Web組件，

Storybook

對(duì)于前段來(lái)說(shuō)，組件化技術(shù)已經(jīng)是必修的一門課程了，這其中又以react和vue為主，但平時(shí)在開發(fā)組件，尤其是公共組件或第三方組件時(shí)會(huì)有些困擾，

• 不能很好的管理組件，預(yù)覽組件時(shí)不能一目了然，也不能很好的反應(yīng)一個(gè)組件的不同狀態(tài)，

• 自動(dòng)化交互測(cè)試可以使用enzyme，但很多時(shí)候還得手動(dòng)測(cè)試，

• 在寫文檔時(shí) 需要將組件預(yù)覽和文檔寫在一起，并需要切換不同狀態(tài)，

所以，storbook就是為了解決這些問(wèn)題而出現(xiàn)，他能為組件搭建一個(gè)強(qiáng)大的開發(fā)環(huán)境，主要提供下面幾點(diǎn)

• 提供一個(gè)強(qiáng)大的UI組件管理頁(yè)面，可以很便捷，清晰的分組，管理多個(gè)組件或一個(gè)組件的不同狀態(tài)

• 在自動(dòng)化交互測(cè)試外，可以很方便的進(jìn)行手動(dòng)交互測(cè)試，并且可以動(dòng)態(tài)改變組件參數(shù)，查看視圖變化

• 可以將組件預(yù)覽導(dǎo)出為靜態(tài)資源，這樣就可以很方便查看組件的文檔和不同參數(shù)對(duì)應(yīng)的不同視圖 還有一系列插件，更好的幫助我們完成開發(fā) 測(cè)試 優(yōu)化組件工作。

該工具使用開發(fā)人員能夠獨(dú)立于主應(yīng)用程序組件，并在隔離的開發(fā)環(huán)境中已交互方式展示他們，而無(wú)需擔(dān)心特定有應(yīng)用程序的依賴關(guān)系和要求，方便開發(fā)人員，設(shè)計(jì)人員等多人參與項(xiàng)目。

Visual Studio Code

Visual Studio Code（簡(jiǎn)稱“VS Code”）是Microsoft在2015年4月30日Build開發(fā)者大會(huì)上正式宣布一個(gè)運(yùn)行于 Mac OS X、Windows和 Linux 之上的，針對(duì)于編寫現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器，可在桌面上運(yùn)行，并且可用于Windows，macOS和Linux。它具有對(duì)JavaScript，TypeScript和Node.js的內(nèi)置支持，并具有豐富的其他語(yǔ)言（例如C++，C＃，Java，Python，PHP，Go）和運(yùn)行時(shí)（例如.NET和Unity）擴(kuò)展的生態(tài)系統(tǒng)。

WebStorm

WebStorm 是JetBrains公司旗下一款JavaScript 開發(fā)工具。已經(jīng)被廣大中國(guó)JS開發(fā)者譽(yù)為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強(qiáng)大的JS部分的功能。