用vue快速開發app的腳手架工具

滕亞慶_ArH發表於2019-03-03
VueAPP

用vue快速開發app的腳手架工具

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,腳手架自帶了幾個頁面可供參考.

遵循相對路徑原則,如果在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中,在未來的更新中會慢慢移植.

常見問題

相關文章