vue 移動端模板

啟動項(xiàng)目

npm i 安裝依賴

npm run serve 啟動項(xiàng)目

cd server (接口目錄)

npm i

npm run dev

前言

花了半天的時(shí)間整理了一個(gè) vue 移動端項(xiàng)目的模板，希望多還不熟悉 vue 項(xiàng)目搭建的小伙伴有些幫助，也歡迎各路大神提出寶貴的建議，本文章默認(rèn)你已經(jīng)對 webpack 和 vue 有一定的了解。

核心知識體系簡介

vue-cli3 腳手架

創(chuàng)建項(xiàng)目

開發(fā)環(huán)境和生產(chǎn)環(huán)境配置

配置跨域

vue-router 路由

路由配置

子路由配置

路由守衛(wèi)，設(shè)置頁面標(biāo)題和根據(jù)登錄狀態(tài)判斷是否允許進(jìn)入特定頁面

對router-link使用active-class,高亮當(dāng)前路由

vuex 跨組件通信

vuex 配置

vuex 持久化

vuex 使用

rem 移動端適配

通過 amfe-flexibe 設(shè)置 root 元素的字體大小

通過 pxtorem 把 px 轉(zhuǎn)成 rem, 無需手動書寫 rem

axios 配置

使用攔截器配置 baseURL 和給請求頭加上 token

使用攔截器對返回的數(shù)據(jù)進(jìn)行處理

掛載到 vue 原型上，方便使用

promise 使用

在項(xiàng)目中使用 async await 把異步變成同步，編寫和閱讀更舒服

有贊 vant-ui 庫

導(dǎo)航欄

單元格

loading

......

使用keep-alive組件緩存某些組件(新增)

添加小型服務(wù)器接口,用來編寫本項(xiàng)目所需接口

vue-cli3 腳手架

開發(fā)環(huán)境和生產(chǎn)環(huán)境配置

根目錄新建兩文件 .env.development => 開發(fā)環(huán)境配置 .env.production => 生產(chǎn)環(huán)境配置

文件內(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, 開發(fā)環(huán)境對應(yīng)development, 生產(chǎn)環(huán)境對應(yīng)production,如果你不知道m(xù)odel,請移步webpack文檔官網(wǎng)

在你的項(xiàng)目中，通過 process.env.VUE_APP_URL 可以訪問到你在環(huán)境配置文件中設(shè)置的變量

vue-router 路由

這里主要講一下路由守衛(wèi)的配置，先上圖

下面是路由守衛(wèi)配置

vuex 跨組件通信

項(xiàng)目中有以下幾個(gè)地方用到了 vuex

設(shè)置登錄狀態(tài)

設(shè)置用戶名

保存 token

以登錄為里，做個(gè)簡單說明

登錄成功時(shí)，修改登陸狀態(tài)為 true

退出登錄時(shí)，修改登錄狀態(tài)為 false

獲取 store 中 state 設(shè)置的變量通過 mapGetters, 看圖

vuex 持久化

使用 vuex-persistedstate 插件對 vuex 的狀態(tài)持久化

等你的頁面刷新時(shí)，狀態(tài)依然存在

本質(zhì)上是這個(gè)插件幫你把狀態(tài)都存到了 localStorage

配置方法，以下是最簡單的配置

使用了 vuex-persistedstate 插件后，store 里的狀態(tài)都存到了 localStorage

rem 移動端適配

安裝 amfe-flexible 插件 npm i amfe-flexible --save-dev

在 main.js 中導(dǎo)入

此時(shí)你的應(yīng)用的 html 會自動根據(jù)手機(jī)的尺寸設(shè)置了 font-size, 如圖

配置 pxtorem 插件，能幫你自動把 rem 轉(zhuǎn)成 px, 具體配置如下，在項(xiàng)目根目錄下的 vue.config.js(沒有則新建)

里進(jìn)行配置，如圖

axios 配置

axios 攔截器

能幫我們對數(shù)據(jù)進(jìn)行一些統(tǒng)一的處理，比如后臺給我們的數(shù)據(jù)里都是把數(shù)據(jù)包在 data 對象里面，而使用 axios, 則又會再用 data 把返回的數(shù)據(jù)再包一層，如果不統(tǒng)一處理以下，用起來很不爽。

設(shè)置請求頭，后臺識別用戶經(jīng)常使用 token, 我們登陸的時(shí)候能拿到后臺返回的 token, 然后存入 store 里，當(dāng)我們發(fā)送請求時(shí)，我們可以給請求頭統(tǒng)一加上 token, 如圖

把 axios 的實(shí)例掛載到 vue 的實(shí)例上

發(fā)請求的時(shí)候，只需要使用 this.$axios.get 或者 this.$axios.post 就行了，是不是很方便

Promise 的使用

promise 是個(gè)好東西，可以把異步變同步，在項(xiàng)目中使用 async await 編寫代碼，那叫一個(gè)爽，具體用法如下：

有贊 vant-ui 庫

有贊是搞電商開發(fā)的,在公眾號和小程序模板界算是做得比較不錯(cuò)的,vant-ui是他們開源出來的一個(gè)ui庫,同時(shí)他們還有小程序的ui庫,感興趣的小伙伴可以去看看(https://youzan.github.io/vant/)

總結(jié)

以上是生活随笔為你收集整理的vue html5模板,vue-h5-template的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。