移動端vue項目模板

模板項目技術棧

• vue-cli3腳手架
• vue-router
• vuex跨組件通信
• rem適配
• axios攔截器
• token
• Promise
• vant-ui

核心知識體系簡介

1. vue-cli3腳手架
   • 創建項目
   • 開發環境和生產環境配置
2. vue-router路由
   • 路由配置
   • 子路由配置
   • 路由守衛,設置頁面標題和根據登錄狀態判斷是否允許進入特定頁面
3. vuex跨組件通信
   • vuex配置
   • vuex持久化
   • vuex使用
4. rem移動端適配
   • 通過amfe-flexibe設置root元素的字體大小
   • 通過pxtorem把px轉成rem,無需手動書寫rem
5. axios配置
   • 使用攔截器配置baseURL和給請求頭加上token
   • 使用攔截器對返回的數據進行處理
   • 掛載到vue原型上,方便使用
6. promise使用
   • 在項目中使用async await把異步變成同步,編寫和閱讀更舒服
7. 有贊vant-ui庫
   • 導航欄
   • 單元格
   • loading
   • ......

vue-cli3腳手架

1. 具體操作,請移步vue-cli3文檔官網
2. 開發環境和生產環境配置

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

  
  
   

  

  image.png
  
  

  文件內容

// .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" 

3. package.json配置
   vue-cli3默認已經給你配置好了model, 開發環境對應development, 生產環境對應production,如果你不知道model,請移步webpack文檔官網
   
    

   

   image.png

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

   
   
    

   

    
   
   
    

   

   開發環境中的變量

vue-router路由

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

 

路由配置

下面是路由守衛配置

 

路由守衛

vuex跨組件通信

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

   • 設置登錄狀態
   • 設置用戶名
   • 保存token

2. 以登錄為里,做個簡單說明

   
   
    

   

    
   
   

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

   
   
    

   

   image.png
   
   退出登錄時,修改登錄狀態為false
   
    

   

    

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

   
   
    

   

    
   
   
    

   

   在模板中使用

4. vuex持久化

   • 使用vuex-persistedstate插件對vuex的狀態持久化
   • 等你的頁面刷新時,狀態依然存在

   • 本質上是這個插件幫你把狀態都存到了localStorage
     配置方法,以下是最簡單的配置

     
     
      

     

      
     
     

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

     
     
      

     

     image.png

rem移動端適配

適配原理我就不多說了,不清楚請看我的另外一篇文章[用rem編寫移動端自適應網頁]https://www.jianshu.com/p/91ac1690be89,這里說一下在vue-cli3中是如何配置的

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

2. 在main.js中導入

   
   
    

   

   ipone6

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

   
   
    

   

    
   
   
    

   

    

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

   
   
    

   

    

axios配置

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

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

   
   
    

   

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

   

    
   
   發請求的時候,只需要使用this.axios.post就行了,是不是很方便
   
    

   

    

Promise的使用

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

 

 

有贊vant-ui庫

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

模板項目源碼地址

作者：胡儒清_前端那個老胡
鏈接：https://www.jianshu.com/p/a9401aa5219c
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。