更新時(shí)間:2021年12月16日10時(shí)54分 來源:傳智教育 瀏覽次數(shù):
Vue全家桶一般來說指的是腳手架vue-cli、路由vue-Router、狀態(tài)管理模式vuex、Axios、elementUI等ui框架和打包工具webpack,下面我們分別介紹。
vue-cli也叫腳手架,官方定義為Vue.js開發(fā)的標(biāo)準(zhǔn)工具。Vue-cli是一個(gè)基于Vue.js進(jìn)行快速開發(fā)的完整系統(tǒng),可以自動生成Vue.js+webpack的項(xiàng)目模板。Vue cli提供了強(qiáng)大的功能,用于定制新項(xiàng)目、配置原型、添加插件和檢查webpack配置。@vue/cli 3.x版本可以通過vue create命令快速創(chuàng)建一個(gè) 新項(xiàng)目的腳手架,不需要像vue 2.x那樣借助于webpack來構(gòu)建項(xiàng)目。
相比scirpt標(biāo)簽引入,vue-cli腳手架具有一下特點(diǎn):
1)功能豐富
對 Babel、TypeScript、ESLint、PostCSS、PWA、單元測試和 End-to-end 測試提供開箱即用的支持。
2)易于擴(kuò)展
它的插件系統(tǒng)可以讓社區(qū)根據(jù)常見需求構(gòu)建和共享可復(fù)用的解決方案。
3)無需 Eject
Vue CLI 完全是可配置的,無需 eject。這樣你的項(xiàng)目就可以長期保持更新了。
4)CLI 之上的圖形化界面
通過配套的圖形化界面創(chuàng)建、開發(fā)和管理你的項(xiàng)目。
5)即刻創(chuàng)建原型
用單個(gè) Vue 文件即刻實(shí)踐新的靈感。
6)面向未來
為現(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)建,相對簡單(推薦) vue create my-project # OR vue ui
vue-router是Vue官方推出的路由管理器,主要用于管理URL,實(shí)現(xiàn)URL和組件的對應(yīng),以及通過URL進(jìn)行組件之間的切換,從而使構(gòu)建單頁面應(yīng)用變得更加簡單。主要有以下特點(diǎn):
1)嵌套的路由/視圖表
2)模塊化的、基于組件的路由配置
3)路由參數(shù)、查詢、通配符
4)基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
5)細(xì)粒度的導(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)
在一些大型項(xiàng)目中,有時(shí)我們會遇到單頁面中包含著大量的組件及復(fù)雜的數(shù)據(jù)結(jié)構(gòu),而且可能各組件還會互相影響各自的狀態(tài),在這種情況下組件樹中的事件流會很快變得非常復(fù)雜,也使調(diào)試變得異常困難。為了解決這一問題,引入了Vuex這種狀態(tài)管理模式,Vuex是狀態(tài)管理模式的一種實(shí)現(xiàn)庫,主要以插件的形式和Vue.js進(jìn)行配合使用,能夠使我們在Vue.js中管理復(fù)雜的組件事件流。
vuex安裝方法
npm install vuex --save
Axios是一個(gè)基于promise的HTTP庫,簡單的講就是可以發(fā)送get、post請求。
Axios特性
1)從瀏覽器中創(chuàng)建 XMLHttpRequests
2)從 node.js 創(chuàng)建 http 請求
3)支持 Promise API
4)攔截請求和響應(yīng)
5)轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
6)能夠取消請求
7)自動轉(zhuǎn)換 JSON 數(shù)據(jù)
8)客戶端支持防御 XSRF
安裝方法
npm install axios
或者直接引入
<pre class="brush:html;toolbar:false;">npm install axios</pre>iview 一套基于 Vue的高質(zhì)量UI 組件庫(分為小程序和pc端等不同版本);
vant 輕量、可靠的移動端 Vue 組件庫,是有贊開源的一套基于 Vue 2.0 的 Mobile 組件庫,旨在更快、更簡單地開發(fā)基于 Vue 的美觀易用的移動站點(diǎn)。
Ant Design Vue 是 Ant Design 的 Vue 實(shí)現(xiàn),開發(fā)和服務(wù)于企業(yè)級后臺產(chǎn)品。
elementUI 是基于 Vue 2.0 桌面端中后臺組件庫。
webpack是一個(gè)模塊打包工具,可以把前端項(xiàng)目中的js、cs、scss/less、圖片等文件都打包在一起,實(shí)現(xiàn)自動化構(gòu)建,給前端開發(fā)人員帶來了極大的便利。
安裝方法
npm install webpack -g
以上是為大家介紹了“vue全家桶”,希望對大家有所幫助。如果你在學(xué)習(xí)打算學(xué)習(xí)Vue,推薦學(xué)習(xí)面《vue.js教程:vue2.0+vue3.0全套視頻教程》
添加QQ:435946716發(fā)送本頁面鏈接,即可免費(fèi)獲取vue2.0+vue3.0全套視頻教程+筆記+源碼。
猜你喜歡:
北京校區(qū)