模板項(xiàng)目技術(shù)棧
- vue-cli3腳手架
- vue-router
- vuex跨組件通信
- rem適配
- axios攔截器
- token
- Promise
- vant-ui
核心知識(shí)體系簡(jiǎn)介
- vue-cli3腳手架
- 創(chuàng)建項(xiàng)目
- 開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境配置
- vue-router路由
- 路由配置
- 子路由配置
- 路由守衛(wèi),設(shè)置頁(yè)面標(biāo)題和根據(jù)登錄狀態(tài)判斷是否允許進(jìn)入特定頁(yè)面
- vuex跨組件通信
- vuex配置
- vuex持久化
- vuex使用
- rem移動(dòng)端適配
- 通過(guò)amfe-flexibe設(shè)置root元素的字體大小
- 通過(guò)pxtorem把px轉(zhuǎn)成rem,無(wú)需手動(dòng)書寫rem
- axios配置
- 使用攔截器配置baseURL和給請(qǐng)求頭加上token
- 使用攔截器對(duì)返回的數(shù)據(jù)進(jìn)行處理
- 掛載到vue原型上,方便使用
- promise使用
- 在項(xiàng)目中使用async await把異步變成同步,編寫和閱讀更舒服
- 有贊vant-ui庫(kù)
- 導(dǎo)航欄
- 單元格
- loading
- ......
vue-cli3腳手架
- 具體操作,請(qǐng)移步vue-cli3文檔官網(wǎng)
- 開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境配置
-
根目錄新建兩文件 .env.development => 開(kāi)發(fā)環(huán)境配置 .env.production => 生產(chǎn)環(huán)境配置
image.png
文件內(nèi)容
// .env.development
VUE_APP_URL="https://www.easy-mock.com/mock/5cd62747d3a84206275d58d1/huruqing/api"
// .env.production
VUE_APP_URL="https://www.easy-mock.com/mock/5cd62747d3a84206275d58d1/huruqing/api"
-
package.json配置
vue-cli3默認(rèn)已經(jīng)給你配置好了model, 開(kāi)發(fā)環(huán)境對(duì)應(yīng)development, 生產(chǎn)環(huán)境對(duì)應(yīng)production,如果你不知道m(xù)odel,請(qǐng)移步webpack文檔官網(wǎng)
image.png -
在你的項(xiàng)目中,通過(guò) process.env.VUE_APP_URL 可以訪問(wèn)到你在環(huán)境配置文件中設(shè)置的變量
開(kāi)發(fā)環(huán)境中的變量
vue-router路由
這里主要講一下路由守衛(wèi)的配置,先上圖
下面是路由守衛(wèi)配置
vuex跨組件通信
-
項(xiàng)目中有以下幾個(gè)地方用到了vuex
- 設(shè)置登錄狀態(tài)
- 設(shè)置用戶名
- 保存token
-
以登錄為里,做個(gè)簡(jiǎn)單說(shuō)明
登錄成功時(shí),修改登陸狀態(tài)為true
image.png
退出登錄時(shí),修改登錄狀態(tài)為false
-
獲取store中state設(shè)置的變量通過(guò)mapGetters,看圖
在模板中使用 -
vuex持久化
- 使用vuex-persistedstate插件對(duì)vuex的狀態(tài)持久化
- 等你的頁(yè)面刷新時(shí),狀態(tài)依然存在
-
本質(zhì)上是這個(gè)插件幫你把狀態(tài)都存到了localStorage
配置方法,以下是最簡(jiǎn)單的配置
使用了vuex-persistedstate插件后,store里的狀態(tài)都存到了localStorage
image.png
rem移動(dòng)端適配
適配原理我就不多說(shuō)了,不清楚請(qǐng)看我的另外一篇文章[用rem編寫移動(dòng)端自適應(yīng)網(wǎng)頁(yè)]http://www.reibang.com/p/91ac1690be89,這里說(shuō)一下在vue-cli3中是如何配置的
- 安裝 amfe-flexible插件
npm i amfe-flexible --save-dev -
在main.js中導(dǎo)入
ipone6 -
此時(shí)你的應(yīng)用的html會(huì)自動(dòng)根據(jù)手機(jī)的尺寸設(shè)置了font-size,如圖
-
配置pxtorem插件,能幫你自動(dòng)把rem轉(zhuǎn)成px,具體配置如下,在項(xiàng)目根目錄下的vue.config.js(沒(méi)有則新建)
里進(jìn)行配置,如圖
axios配置
- axios攔截器
能幫我們對(duì)數(shù)據(jù)進(jìn)行一些統(tǒng)一的處理,比如后臺(tái)給我們的數(shù)據(jù)里都是把數(shù)據(jù)包在data對(duì)象里面,而使用axios,則又會(huì)再用data把返回的數(shù)據(jù)再包一層,如果不統(tǒng)一處理以下,用起來(lái)很不爽. -
設(shè)置請(qǐng)求頭,后臺(tái)識(shí)別用戶經(jīng)常使用token,我們登陸的時(shí)候能拿到后臺(tái)返回的token,然后存入store里,當(dāng)我們發(fā)送請(qǐng)求時(shí),我們可以給請(qǐng)求頭統(tǒng)一加上token,如圖
- 把a(bǔ)xios的實(shí)例掛載到vue的實(shí)例上
發(fā)請(qǐng)求的時(shí)候,只需要使用this.axios.post就行了,是不是很方便
Promise的使用
promise是個(gè)好東西,可以把異步變同步,在項(xiàng)目中使用async await編寫代碼,那叫一個(gè)爽,具體用法如下:
有贊vant-ui庫(kù)
有贊是搞電商開(kāi)發(fā)的,在公眾號(hào)和小程序模板界算是做得比較不錯(cuò)的,vant-ui是他們開(kāi)源出來(lái)的一個(gè)ui庫(kù),同時(shí)他們還有小程序的ui庫(kù),感興趣的小伙伴可以去[看看]https://youzan.github.io/vant/
