vue全家桶都包括哪些 vue全家桶都有什麼 vue全家桶詳細介紹
vue全家桶都有什麼
全家桶，顧名思義，對於開發一個完整的中大型單頁面應用專案所必須的所必須的外掛和框架。
注：此文章主要講解vue-cli腳手架開發方式，主要介紹各外掛安裝方法及其功能特點，不介紹各外掛的具體使用方式，具體使用方式詳見其他詳細介紹文章。
一、vue-cli
vue-cli也叫腳手架，官方定義為Vue.js 開發的標準工具！相比scirpt標籤引入，腳手架具有如下特點：
1）、功能豐富
對 Babel、TypeScript、ESLint、PostCSS、PWA、單元測試和 End-to-end 測試提供開箱即用的支援。
2）、易於擴充套件
它的外掛系統可以讓社群根據常見需求構建和共享可複用的解決方案。
3）、無需 Eject
Vue CLI 完全是可配置的，無需 eject。這樣你的專案就可以長期保持更新了。
4）、CLI 之上的圖形化介面
通過配套的圖形化介面建立、開發和管理你的專案。
5）、即刻建立原型
用單個 Vue 檔案即刻實踐新的靈感。
6）、面向未來
為現代瀏覽器輕鬆產出原生的 ES2015 程式碼，或將你的 Vue 元件構建為原生的 Web Components 元件。
安裝
npm install -g @vue/cli
# OR
yarn global add @vue/cli
//安裝完成後建立一個專案，vue ui為圖形化構建，相對簡單（推薦）
vue create my-project
# OR
vue ui- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
二、vueRouter
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：
1）巢狀的路由/視圖表
2）模組化的、基於元件的路由配置
3）路由引數、查詢、萬用字元
4）基於 Vue.js 過渡系統的檢視過渡效果
5）細粒度的導航控制
6）帶有自動啟用的 CSS class 的連結
7）HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
8）自定義的滾動條行為
vueRouter 安裝
npm install vue-router
//安裝後在mainjs引入
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//具體使用方法詳見另一篇文章，路由使用方法- 1
- 2
- 3
- 4
- 5
- 6
三、vuex
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到 Vue 的官方除錯工具 devtools extension，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。
什麼情況下我應該使用 Vuex？
Vuex 可以幫助我們管理共享狀態，並附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。
如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。但是，如果您需要構建一箇中大型單頁應用，您很可能會考慮如何更好地在元件外部管理狀態，Vuex 將會成為自然而然的選擇。
安裝方法
npm install vuex --save- 1
四、Axios
Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
特性
1）從瀏覽器中建立 XMLHttpRequests
2）從 node.js 建立 http 請求
3）支援 Promise API
4）攔截請求和響應
5）轉換請求資料和響應資料
6）取消請求
7）自動轉換 JSON 資料
8）客戶端支援防禦 XSRF
安裝方法
npm install axios- 1
五、搭配UI框架如：iview、vant、elementUI
iview 一套基於 Vue的高質量UI 元件庫(分為小程式和pc端等不同版本)；
vant 輕量、可靠的移動端 Vue 元件庫,是有贊開源的一套基於 Vue 2.0 的 Mobile 元件庫,旨在更快、更簡單地開發基於 Vue 的美觀易用的移動站點。
Ant Design Vue 是 Ant Design 的 Vue 實現，開發和服務於企業級後臺產品。
elementUI 是基於 Vue 2.0 桌面端中後臺元件庫。