vue.js全家桶包含什麼

Vue.js全家桶包含鷹架vue-cli、路由vue-router、狀態管理模式vuex、axios、UI框架。 Vue是一款用於建立使用者介面的JavaScript框架，它基於標準HTML、CSS和JavaScript構建，並提供了一套聲明式的、組件化的程式設計模型，幫助開發者有效率地開發使用者介面。

本教學作業系統：Windows10系統、vue 3.0版本、Dell G3電腦。

Vue.js全家桶由鷹架vue-cli、路由vue-router、狀態管理模式vuex、axios、UI框架組成。 Vue (發音為 /vjuː/，類似 view) 是用於建立使用者介面的JavaScript框架。它基於標準HTML、CSS和JavaScript構建，並提供了一套聲明式的、組件化的程式設計模型，幫助開發者有效率地開發使用者介面。

一、專案建置工具：vue-cli

vue-cli也叫鷹架，官方定義為Vue.js開發的標準工具。 Vue-cli是基於Vue.js進行快速開發的完整系統，可以自動產生Vue.js webpack的專案範本。 Vue cli提供了強大的功能，用於自訂新專案、設定原型、新增外掛程式和檢查webpack配置。 @vue/cli 3.x版本可以透過vue create指令快速建立一個 新專案的腳手架，不需要像vue 2.x那樣借助於webpack來建構專案。

相比scirpt標籤引入，vue-cli腳手架具有以下特點：

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

二、路由管理器：vue-router

vue-router是Vue官方推出的路由管理器，主要用於管理URL，實現URL和元件的對應，以及透過URL進行元件之間的切換，從而使建立單頁應用變得更加簡單。主要有以下特點：

1)嵌套的路由/視圖表

2)模組化的、基於組件的路由配置

3)路由參數、查詢、通配符

4)基於Vue.js 過渡系統的視圖過渡效果

5)細粒度的導航控制

6)帶有自動啟動的CSS class 的連結

7)HTML5 歷史模式或hash 模式，在IE9 中自動降級

8)自訂的捲軸行為

vue Router安裝程式碼

npm install vue-router
//安装后在mainjs引入
import VueRouter from 'vue-router'

Vue.use(VueRouter)

三、狀態管理模式：vuex

在一些大型專案中，有時我們會遇到單一頁面中包含著大量的元件及複雜的資料結構，而且可能各元件也會互相影響各自的狀態，在這種情況下元件樹中的事件流會很快變得非常複雜，也使偵錯變得異常困難。為了解決這個問題，引入了Vuex這種狀態管理模式，Vuex是狀態管理模式的一種實作庫，主要以插件的形式和Vue.js進行配合使用，能夠使我們在Vue.js中管理複雜的組件事件流。

vuex安裝方法

npm install vuex --save

四、axios

#Axios是基於promise的HTTP庫，簡單的講就是可以發送get 、post請求。

Axios特性

1)從瀏覽器中建立XMLHttpRequests

2)從node.js 建立http 請求

3)支援Promise API

4)攔截請求和回應

5)轉換請求資料和回應資料

6)能夠取消請求

7)自動轉換JSON 資料

8)客戶端支援防禦XSRF

安裝方法

npm install axios

或直接引入

092b881d52b9ad77fe1df005b2fcc81f

五、 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 桌面端中後台元件庫。

以上是vue.js全家桶包含什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！