vue全家桶是指什么？有哪些東西？【附贈(zèng)Vue2+Vue3教程】

Vue全家桶一般來(lái)說(shuō)指的是腳手架vue-cli、路由vue-Router、狀態(tài)管理模式vuex、Axios、elementUI等ui框架和打包工具webpack，下面我們分別介紹。

1. 項(xiàng)目構(gòu)建工具：vue-cli

vue-cli也叫腳手架，官方定義為Vue.js開(kāi)發(fā)的標(biāo)準(zhǔn)工具。Vue-cli是一個(gè)基于Vue.js進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)，可以自動(dòng)生成Vue.js+webpack的項(xiàng)目模板。Vue cli提供了強(qiáng)大的功能，用于定制新項(xiàng)目、配置原型、添加插件和檢查webpack配置。@vue/cli 3.x版本可以通過(guò)vue create命令快速創(chuàng)建一個(gè) 新項(xiàng)目的腳手架，不需要像vue 2.x那樣借助于webpack來(lái)構(gòu)建項(xiàng)目。

相比scirpt標(biāo)簽引入，vue-cli腳手架具有一下特點(diǎn)：

1)功能豐富

對(duì) Babel、TypeScript、ESLint、PostCSS、PWA、單元測(cè)試和 End-to-end 測(cè)試提供開(kāi)箱即用的支持。

2)易于擴(kuò)展

它的插件系統(tǒng)可以讓社區(qū)根據(jù)常見(jiàn)需求構(gòu)建和共享可復(fù)用的解決方案。

3)無(wú)需 Eject

Vue CLI 完全是可配置的，無(wú)需 eject。這樣你的項(xiàng)目就可以長(zhǎng)期保持更新了。

4)CLI 之上的圖形化界面

通過(guò)配套的圖形化界面創(chuàng)建、開(kāi)發(fā)和管理你的項(xiàng)目。

5)即刻創(chuàng)建原型

用單個(gè) Vue 文件即刻實(shí)踐新的靈感。

6)面向未來(lái)

為現(xiàn)代瀏覽器輕松產(chǎn)出原生的 ES2015 代碼，或?qū)⒛愕?Vue 組件構(gòu)建為原生的 Web Components 組件。

安裝

npm install -g @vue/cli
# OR
yarn global add @vue/cli

//安裝完成后創(chuàng)建一個(gè)項(xiàng)目，vue ui為圖形化構(gòu)建，相對(duì)簡(jiǎn)單（推薦）
vue create my-project
# OR
vue ui

2. 路由管理器：vue-Router

vue-router是Vue官方推出的路由管理器，主要用于管理URL，實(shí)現(xiàn)URL和組件的對(duì)應(yīng)，以及通過(guò)URL進(jìn)行組件之間的切換，從而使構(gòu)建單頁(yè)面應(yīng)用變得更加簡(jiǎn)單。主要有以下特點(diǎn)：

1)嵌套的路由/視圖表

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

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

4)基于 Vue.js 過(guò)渡系統(tǒng)的視圖過(guò)渡效果

5)細(xì)粒度的導(dǎo)航控制

6)帶有自動(dòng)激活的 CSS class 的鏈接

7)HTML5 歷史模式或 hash 模式，在 IE9 中自動(dòng)降級(jí)

8)自定義的滾動(dòng)條行為

vue Router安裝代碼

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

Vue.use(VueRouter)

3. 狀態(tài)管理模式：vuex

在一些大型項(xiàng)目中，有時(shí)我們會(huì)遇到單頁(yè)面中包含著大量的組件及復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，而且可能各組件還會(huì)互相影響各自的狀態(tài)，在這種情況下組件樹(shù)中的事件流會(huì)很快變得非常復(fù)雜，也使調(diào)試變得異常困難。為了解決這一問(wèn)題，引入了Vuex這種狀態(tài)管理模式，Vuex是狀態(tài)管理模式的一種實(shí)現(xiàn)庫(kù)，主要以插件的形式和Vue.js進(jìn)行配合使用，能夠使我們?cè)赩ue.js中管理復(fù)雜的組件事件流。

vuex安裝方法

npm install vuex --save

4. Axios

Axios是一個(gè)基于promise的HTTP庫(kù)，簡(jiǎn)單的講就是可以發(fā)送get、post請(qǐng)求。

Axios特性

1)從瀏覽器中創(chuàng)建 XMLHttpRequests

2)從 node.js 創(chuàng)建 http 請(qǐng)求

3)支持 Promise API

4)攔截請(qǐng)求和響應(yīng)

5)轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)

6)能夠取消請(qǐng)求

7)自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)

8)客戶端支持防御 XSRF

安裝方法

npm install axios

或者直接引入

<pre class="brush:html;toolbar:false;">npm install axios</pre>

5. UI框架：iview、vant、elementUI

iview 一套基于 Vue的高質(zhì)量UI 組件庫(kù)(分為小程序和pc端等不同版本);

vant 輕量、可靠的移動(dòng)端 Vue 組件庫(kù)，是有贊開(kāi)源的一套基于 Vue 2.0 的 Mobile 組件庫(kù)，旨在更快、更簡(jiǎn)單地開(kāi)發(fā)基于 Vue 的美觀易用的移動(dòng)站點(diǎn)。

Ant Design Vue 是 Ant Design 的 Vue 實(shí)現(xiàn)，開(kāi)發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品。

elementUI 是基于 Vue 2.0 桌面端中后臺(tái)組件庫(kù)。

6. 打包工具：webpack

webpack是一個(gè)模塊打包工具，可以把前端項(xiàng)目中的js、cs、scss/less、圖片等文件都打包在一起，實(shí)現(xiàn)自動(dòng)化構(gòu)建，給前端開(kāi)發(fā)人員帶來(lái)了極大的便利。

安裝方法

npm install webpack -g

以上是為大家介紹了“vue全家桶”，希望對(duì)大家有所幫助。如果你在學(xué)習(xí)打算學(xué)習(xí)Vue，推薦學(xué)習(xí)面《vue.js教程：vue2.0+vue3.0全套視頻教程》

添加QQ：435946716發(fā)送本頁(yè)面鏈接，即可免費(fèi)獲取vue2.0+vue3.0全套視頻教程+筆記+源碼。

猜你喜歡：

VUE優(yōu)點(diǎn)有哪些?VUE的特點(diǎn)介紹

webpack是什么？有什么用？怎么用？

Vue生命周期總共分為幾個(gè)階段?

什么是Vue？Vue的工作原理是什么？

傳智教育前端開(kāi)發(fā)培訓(xùn)課程