webpack4+vue實現多頁面,結合Hbuilder快速開發APP

前言

多頁面應用於結構較於簡單的頁面,由於簡答的頁面使用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,腳手架自帶了幾個頁面可供參考.

::: tip 路由
遵循相對路徑原則,若是在src訪問這個頁面則就是./goods/list.html
!!! 後綴必定是.html
:::

新建組件

組件放入./src/components目錄下,若是組件較多,可自行創建目錄.好比 demo 中使用的 Logo 組件能夠做爲參考.

新建工具庫

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

`common.js` 是每一個頁面都須要加載的一個 js,裏面加載了`fastclick`和`vconsole`.若是全局須要加統計,全局執行的函數,能夠放在這個文件裏面.

`./src/utils` 作了 `alias`別名,能夠 直接這樣加載 `import common from "Utils/common"`.

發送請求

請求庫

demo 的請求使用的是 axios,一樣你喜歡什麼庫均可以本身去封裝.

常見的請求庫有fetch,request,SuperAgent,jquery-ajax.

跨域

因爲npm start後,調試網頁是掛在局域網上,而且做爲 Hbuilder 的頁面入口,所以,在請求時會出現跨域.

在./build.js中使用本地代理,將下面的https://api.douban.com修改爲本身使用的業務域名便可.

proxy: {
    "/api": {
      name:"DOUBANAPI",  // 本身取名
      target: "https://api.douban.com",
      pathRewrite: { "^/api": "" },
      changeOrigin: true,
      secure: false
    },
     "/baidu_api": {
      name:"BAIDUAPI",  // 本身取名
      target: "https://api.baidu.com",
      pathRewrite: { "^/api": "" },
      changeOrigin: true,
      secure: false
    },
    ...
  }

若是有更多業務域名能夠繼續在proxy添加.

只有開發的時候纔會有跨域問題,打包後的文件網址會被替換成被代理的網址,所以發送請求必定要加上名稱DOUBANAPI

request({
  url: DOUBANAPI + "/bookList"
});

調試

在 Hbuilder 中調試會有諸多問題,好比:

• 不能直接打印數組,對象,須要轉成字符串.
• 即便使用webview調試,仍然不能打印出數組,在 mac 上使用也很是不方便.

使用VConsole,調試的問題基本就脫離 Hbuilder 了,使用VConsole主要優勢以下

• 能夠打印數組,對象
• 能夠查看請求,cookie,Localstorage
• 在System欄目中能夠看到頁面加載速度
• 能夠查看元素

基本上就是一個簡化的開發者工具欄,對於調試來講很是簡便了.

打包

npm run build

運行命令後會有一個dist目錄,裏面的通過壓縮的靜態文件.

Hbuilder 發行打包

在使用 Hbuilder 製做安裝包前,請將入口文件修改爲dist/index.html.
而後能夠安心的打包了.

兼容 mui.js

對於兼容 mui 部分函數的問題,已經在移植部分函數到Utils中,在將來的更新中會慢慢移植.

常見問題