vue 移動端模板

啟動項目

npm i 安裝依賴

npm run serve 啟動項目

cd server (接口目錄)

npm i

npm run dev

前言

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

核心知識體系簡介

vue-cli3 腳手架

創建項目

開發環境和生產環境配置

配置跨域

vue-router 路由

路由配置

子路由配置

路由守衛，設置頁面標題和根據登錄狀態判斷是否允許進入特定頁面

對router-link使用active-class,高亮當前路由

vuex 跨組件通信

vuex 配置

vuex 持久化

vuex 使用

rem 移動端適配

通過 amfe-flexibe 設置 root 元素的字體大小

通過 pxtorem 把 px 轉成 rem, 無需手動書寫 rem

axios 配置

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

使用攔截器對返回的數據進行處理

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

promise 使用

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

有贊 vant-ui 庫

導航欄

單元格

loading

......

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

添加小型服務器接口,用來編寫本項目所需接口

vue-cli3 腳手架

開發環境和生產環境配置

根目錄新建兩文件 .env.development => 開發環境配置 .env.production => 生產環境配置

文件內容

// .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默認已經給你配置好了model, 開發環境對應development, 生產環境對應production,如果你不知道model,請移步webpack文檔官網

在你的項目中，通過 process.env.VUE_APP_URL 可以訪問到你在環境配置文件中設置的變量

vue-router 路由

這里主要講一下路由守衛的配置，先上圖

下面是路由守衛配置

vuex 跨組件通信

項目中有以下幾個地方用到了 vuex

設置登錄狀態

設置用戶名

保存 token

以登錄為里，做個簡單說明

登錄成功時，修改登陸狀態為 true

退出登錄時，修改登錄狀態為 false

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

vuex 持久化

使用 vuex-persistedstate 插件對 vuex 的狀態持久化

等你的頁面刷新時，狀態依然存在

本質上是這個插件幫你把狀態都存到了 localStorage

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

使用了 vuex-persistedstate 插件后，store 里的狀態都存到了 localStorage

rem 移動端適配

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

在 main.js 中導入

此時你的應用的 html 會自動根據手機的尺寸設置了 font-size, 如圖

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

里進行配置，如圖

axios 配置

axios 攔截器

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

設置請求頭，后臺識別用戶經常使用 token, 我們登陸的時候能拿到后臺返回的 token, 然后存入 store 里，當我們發送請求時，我們可以給請求頭統一加上 token, 如圖

把 axios 的實例掛載到 vue 的實例上

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

Promise 的使用

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

有贊 vant-ui 庫

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。