vue全家桶有哪些東西？具體指什么？【附贈Vue全家桶教程】

更新時間:2021-12-16 來源:vue全家桶有哪些東西瀏覽量:

IT培訓班

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

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

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

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

1)功能豐富

對 Babel、TypeScript、ESLint、PostCSS、PWA、單元測試和 End-to-end 測試提供開箱即用的支持。

2)易于擴展

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

3)無需 Eject

Vue CLI 完全是可配置的，無需 eject。這樣你的項目就可以長期保持更新了。

4)CLI 之上的圖形化界面

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

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

用單個 Vue 文件即刻實踐新的靈感。

6)面向未來

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

vue全家桶有哪些

安裝

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

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

2. 路由管理器：vue-Router

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

1)嵌套的路由/視圖表

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

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

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

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

6)帶有自動激活的 CSS class 的鏈接

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

8)自定義的滾動條行為

vue Router安裝代碼

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

Vue.use(VueRouter)

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

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

vuex安裝方法