你要的移動端vue多頁面腳手架，都幫你整合和封裝好了

xusenlin發表於2019-04-01
Vue封裝

移動端1畫素？px轉rem適配？300ms延遲？做活動單頁面導致蘋果安卓微信簽名問題？不存在的。

以前經常做手機H5，喜歡做成vue單頁應用，這樣在開發微信相關應用時，往往因為單頁應用在蘋果和安卓上對於瀏覽器每個頁面的url機制不一樣，經常導致頁面簽名失敗的問題。還有經常從其他應用帶引數跳到單頁應用的某個頁面而載入整個單頁應用，還需要處理路由和許可權等繁瑣的東西，那麼為什麼不做成多頁面應用呢？

github.com/xusenlin/vu…

這是做了大量H5活動整理出來的一個專案，平時候直接克隆出來安裝喜歡的ui庫就投入開發，分享給大家。然後推薦安裝vant。當然還有很多漂亮的ui庫，如下（部分）

  1. vant npm i vant -S
  2. ydui npm install vue-ydui --save
  3. vux npm install vux --save
  4. mint-ui npm i mint-ui -S

Vue Multiple Pages

Project setup

npm install
複製程式碼

Compiles and hot-reloads for development

npm run dev
複製程式碼

Compiles and minifies for production

npm run build
複製程式碼

一個基於vue-cli3腳手架的多頁面vue移動端模板

新增了移動端相關工具如 1px問題、300s點選延遲、px自動轉rem工具，以及微信簽名和請求的封裝等

目錄結構介紹

|-- dist                             // 打包目錄
|-- src                              // 原始碼目錄
|   |-- api                          // Api介面目錄
|       |-- user.js           	     //使用者登入、頭像上傳、密碼修改等使用者相關api
|   |-- assets                       // 靜態資源，你的css、圖片、字型等。
|   |-- components                   //全域性元件
|   |-- config                       // 應用的配置檔案
|       |-- app.js                   // 應用的配置，名字，api請求的url，
|       |-- page.js           	     // 每一個頁面的配置,標題之類的
|   |-- utils                        // 工具函式。和config,api一個道理，建議分類清楚。
|       |-- app.js                   // 常用函式
|       |-- request.js               // 請求封裝
|       |-- weixin.js                // 微信jssdk的封裝，使用請先安裝weixin-js-sdk
|       |-- setHtmlFontSize.js       // 設定根元素字型大小，配合rem做螢幕適配
|   |-- pages                        // 頁面檢視。裡面資料夾建議使用大駝峰,因為這樣比較好看 - -
|       |-- index                    // 首頁
|       |-- common.js                // 公共的js，可以引公共的css,vue ui庫等
|-- .gitignore                       // 忽略的檔案
|-- page.config.js                   // 使用node讀取pages資料夾下的資料夾配置到vue cli3
|-- vue.config.js                    // vue cli 配置
|-- README.md                        // 說明
複製程式碼

說明

  • 使用normalize.css重置樣式。
  • 新增了axios請求庫，並做了簡單的攔截。
  • 新增了fastclick解決移動端300ms點選延遲。
  • 想要新增自己 UI庫,安裝好在common.js引用即可。
  • 新增postcss-px2rem自動將px轉換為rem適配移動端，目前為了和大部分ui庫相容，設定的設計稿寬度為375，可自行修改。
  • 新增頁面請在pages資料夾下新建目錄，在裡面放置index.js和Index.vue（建議複製template資料夾修改名字進行開發）。編譯後，目錄的名字即為網頁的名字。至於為什麼？請檢視page.config.js。

相關文章