前言

多頁面應用于結構較于簡單的頁面,因為簡答的頁面使用router又過于麻煩.本腳手架出于這樣的場景被開發出來.

使用腳手架搭配Hbuilder也同樣可以快速使用vue開發安卓和IOS APP.

本文最大特點:

webpack4 多頁面 跨域Proxy代理 VConsole移動端調試,手機上的開發者工具 es6/es7 babel 轉換

項目地址 GitHub

使用手冊

MogoH5+ 是一個 vue 多頁面 腳手架工具 ,結合 H5+可以快速開發安卓與蘋果 APP.

即使不適用 Hbuilder 打包成 APP,本腳手架同樣可以作為多頁面網頁生成的參考項目.

特性

支持 Npm 生態 支持 vue 語法,以及 vue 生態,比如 vux,mint,vant 支持 ES6/ES7 語法 使用 VConsole 調試 VSCode 友好 局域網便捷調試 兼容部分 mui 語法

這些特性其實不是什么新鮮特性,只是單獨在 Hbuilder 無法使用.

快速上手

直接下載項目然后根據需求定制打包,最后通過 Hbuilder 云打包即可生成 APP.

本文自帶一個案例是使用 VantUI 開發的幾個界面,如果你喜歡其他 UI 同樣可以替換成其他的 UI.

// 1.安裝模塊npm i // or yarn// 2.調試npm start  // 將manifest.json 的`頁面入口` 修改成 http://your_ip:8082/// 3.打包npm run build

使用

主要怎么使用 MogoH5+做正式的開發,在開發過程中一定要遵守 目錄規則 ,否則會有意想不到的錯誤.

目錄結構

.├── docs // 文檔├── index.html // 入口模板├── jsconfig.json //js配置├── manifest.json //hbuilder 入口文件├── src │  ├── components //組件文件夾│  │  └── List.vue //組件│  ├── index.js //主頁入口文件│  ├── index.vue // 主頁vue文件│  ├── page // 頁面│  └── utils // 工具├── unpackage // hbuilder 構建目錄│  └── res└── webpack.config.js //webpack配置目錄

新建頁面

假如我們要新建一個名稱為 list 的頁面作為商品列表,我們就要在 ./src/page/goods 下新建 list.js 和 list.vue 兩個文件. list.js 作為多頁面的入口, list.vue ,腳手架自帶了幾個頁面可供參考.

遵循相對路徑原則,如果在 src 訪問這個頁面則就是 ./goods/list.html !!! 后綴一定是 .html

新建組件

組件放入 ./src/components 目錄下,如果組件較多,可自行建立目錄.比如 demo 中使用的 Logo 組件可以作為參考.

新建工具庫

工具庫 ./src/utils 主要放一些公用函數,比如請求,打開 webview,支付,分享等執行函數. demo 中封裝了部分來自 mui 的函數比如 自定義事件 , webview .這些函數可以作為參考.

common.js` 是每個頁面都需要加載的一個 js,里面加載了`fastclick`和`vconsole`.如果全局需要加統計,全局執行的函數,可以放在這個文件里面.