你要的移動端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。