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

標籤：目錄   vue   es6   OLE   全域   請求   imp   介面   技術分享   

 

前言

多頁面應用於結構較於簡單的頁面,因為簡答的頁面使用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中,在未來的更新中會慢慢移植.

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