動手搭一個基於VueCli3的微信公眾號專案前端框架

LukeYoung0513發表於2019-04-17
Vue前端框架

概述

  • 基礎環境：

  • 開發：跟普通的vue單頁應用開發方式一致。

  • 除錯：

    • 開發環境下，可以藉助chrome進行除錯，需要注意的是,如果涉及到微信驗證的介面，要手動在sessionStorage中注入 wx_info類似的驗證，具體的wx_info配置可以詢問後端開發人員

    • 如果要進行真實賬號測試或者是生產環境下，可以通過微信開發者工具進行除錯，除錯方式跟chrome類似。

    • vuex的除錯，請先科學上網，然後在chrome擴充工具裡搜尋安裝 Vue.js devtools ，安裝完成後開啟開發者工具，在最右側vue欄裡進行vuex除錯。

具體使用

路由管理

  • 採用樹形結構管理路由

  • 每一個大模組單獨設定一個路由，再彙總到總路由檔案

const Demo=() => import(/* webpackChunkName: "demo-page" */ '@views/demo/index')
const DemoDetail =() => import(/* webpackChunkName: "demo-page" */ '@views/demo/detail/index')

const DEMO_ROUTERS =[
    {
        path: '/demo',
        name: '訂單1',
        component: Demo,
        meta: {requireAuth: false,index:1},
    },
    {
        path: '/detail',
        name: '訂單詳情',
        component: DemoDetail,
        meta: {requireAuth: false,index:2},
    },
]

export default DEMO_ROUTERS
複製程式碼

  • 如果該模組較為複雜，頁面很多，可以視情況再細分路由。

  • 結合 Vue 的非同步元件和 Webpack 的程式碼分割功能，實現路由元件的懶載入

serve管理

  • serve 下的 base.js用於全域性配置api請求的域名或者ip地址等

    可以快速的切換測試環境和生產環境

const base = {
     dv:'http://test',  // 測試環境
     pr: 'http://prodect', // 生產環境
     mock:' https://easy-mock.com/mock/5cb4762ae14be30f81aee1a6/mock' // mock環境
}
export default base;
複製程式碼

  • 推薦一個好用的線上生成前端mock資料的網站，easy-mock

  • serve下的 http.js 用於封裝axios

    如果是微信公眾號的專案，需要token驗證,在此處配置token的獲取，並且新增到請求頭

資料管理

  • 簡單專案無需使用vuex,反而加重專案

  • 資料互動較多，難以管理時，使用vuex提高效率

    按照 store 下的demo 這個module作為參考，分模組編寫。

  • 已經整合了vuex資料持久化外掛，預設為所有state資料都存入session

    如果要更改儲存位置，或者希望區域性存入，自行修改plugin配置，配置方法vuex-persistedstate

自適應方案（rem+vw）

// 主題色配置
$theme-color:#4fc08d;
// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基準值
@function rem($px) {
  @return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vw_design: 750;
html {
  font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw;
  // 同時，通過Media Queries 限制根元素最大最小值
  @media screen and (max-width: 300px) {
    font-size: 64px;
  }
  @media screen and (min-width: 750px) {
    font-size: 108px;
  }
}
// body 也增加最大最小寬度限制，避免預設100%寬度的 block 元素跟隨 body 而過大過小
body {
  max-width: 750px;
  min-width: 300px;
}
複製程式碼

  • 預設配置以750作為設計稿基準

  • 同時可以配置最大最小適配範圍

上述功能都整合在view/demo專案裡,可以參考demo具體瞭解

開發優化

  • alias：在vue.config檢視alias 路徑，自行新增或者修改

  • mixins: 已經全域性配置，在static 下的mixin 進行樣式函式的編寫

使用者體驗

  • 使用路由懶載入，提高載入速度

  • 全域性動態配置了路由切換動畫，為了正確顯示切換動畫，在配置路由時一定要寫明路由層級，切換動畫時會根據層級比較作為判斷

結語

沒啥乾貨，權當服務一下前端初學者和伸手黨，同時把自己不成熟的框架拿出來供大家檢閱，發現不足之處。

專案地址

Github

如果有幫助到您，厚著臉皮希望給個小星星

相關文章