用vue快速開(kāi)發(fā)app的腳手架工具

前言

多頁(yè)面應(yīng)用于結(jié)構(gòu)較于簡(jiǎn)單的頁(yè)面,因?yàn)楹?jiǎn)答的頁(yè)面使用router又過(guò)于麻煩.本腳手架出于這樣的場(chǎng)景被開(kāi)發(fā)出來(lái).

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

本文最大特點(diǎn):

1. webpack4
2. 多頁(yè)面
3. 跨域Proxy代理
4. VConsole移動(dòng)端調(diào)試,手機(jī)上的開(kāi)發(fā)者工具
5. es6/es7 babel 轉(zhuǎn)換

項(xiàng)目地址 GitHub

使用手冊(cè)

MogoH5+ 是一個(gè) vue 多頁(yè)面 腳手架工具 ,結(jié)合 H5+可以快速開(kāi)發(fā)安卓與蘋(píng)果 APP.

即使不適用 Hbuilder 打包成 APP,本腳手架同樣可以作為多頁(yè)面網(wǎng)頁(yè)生成的參考項(xiàng)目.

特性

1. 支持 Npm 生態(tài)
2. 支持 vue 語(yǔ)法,以及 vue 生態(tài),比如 vux,mint,vant
3. 支持 ES6/ES7 語(yǔ)法
4. 使用 VConsole 調(diào)試
5. VSCode 友好
6. 局域網(wǎng)便捷調(diào)試
7. 兼容部分 mui 語(yǔ)法

這些特性其實(shí)不是什么新鮮特性,只是單獨(dú)在 Hbuilder 無(wú)法使用.

快速上手

直接下載項(xiàng)目然后根據(jù)需求定制打包,最后通過(guò) Hbuilder 云打包即可生成 APP.

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

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

使用

主要怎么使用 MogoH5+做正式的開(kāi)發(fā),在開(kāi)發(fā)過(guò)程中一定要遵守 目錄規(guī)則 ,否則會(huì)有意想不到的錯(cuò)誤.

目錄結(jié)構(gòu)

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

新建頁(yè)面

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

遵循相對(duì)路徑原則,如果在 src 訪(fǎng)問(wèn)這個(gè)頁(yè)面則就是 ./goods/list.html !!! 后綴一定是 .html

新建組件

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

新建工具庫(kù)

工具庫(kù) ./src/utils 主要放一些公用函數(shù),比如請(qǐng)求,打開(kāi) webview,支付,分享等執(zhí)行函數(shù). demo 中封裝了部分來(lái)自 mui 的函數(shù)比如 自定義事件 , webview .這些函數(shù)可以作為參考.

common.js` 是每個(gè)頁(yè)面都需要加載的一個(gè) js,里面加載了`fastclick`和`vconsole`.如果全局需要加統(tǒng)計(jì),全局執(zhí)行的函數(shù),可以放在這個(gè)文件里面.

`./src/utils` 做了 `alias`別名,可以 直接這樣加載 `import common from "Utils/common"`.

發(fā)送請(qǐng)求

請(qǐng)求庫(kù)

demo 的請(qǐng)求使用的是 axios ,同樣你喜歡什么庫(kù)都可以自己去封裝.

常見(jiàn)的請(qǐng)求庫(kù)有 fetch , request , SuperAgent , jquery-ajax .

跨域

由于 npm start 后,調(diào)試網(wǎng)頁(yè)是掛在局域網(wǎng)上,并且作為 Hbuilder 的 頁(yè)面入口 ,因此,在請(qǐng)求時(shí)會(huì)出現(xiàn) 跨域 .

在 ./build.js 中使用本地代理,將下面的 https://api.douban.com 修改成自己使用的業(yè)務(wù)域名即可.

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
  },
  ...
 }

如果有更多業(yè)務(wù)域名可以繼續(xù)在 proxy 添加.

只有開(kāi)發(fā)的時(shí)候才會(huì)有跨域問(wèn)題,打包后的文件網(wǎng)址會(huì)被替換成被代理的網(wǎng)址,因此發(fā)送請(qǐng)求一定要加上名稱(chēng) DOUBANAPI

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

調(diào)試

在 Hbuilder 中調(diào)試會(huì)有諸多問(wèn)題,比如:

1. 不能直接打印 數(shù)組 , 對(duì)象 ,需要轉(zhuǎn)成字符串.
2. 即使使用 webview調(diào)試 ,仍然不能打印出數(shù)組,在 mac 上使用也非常不方便.

使用 VConsole ,調(diào)試的問(wèn)題基本就脫離 Hbuilder 了,使用 VConsole 主要優(yōu)點(diǎn)如下

1. 可以打印數(shù)組,對(duì)象
2. 可以查看請(qǐng)求,cookie,Localstorage
3. 在System欄目中可以看到頁(yè)面加載速度
4. 可以查看元素
   

基本上就是一個(gè)簡(jiǎn)化的 開(kāi)發(fā)者工具欄 ,對(duì)于調(diào)試來(lái)說(shuō)非常簡(jiǎn)便了.

打包

npm run build

運(yùn)行命令后會(huì)有一個(gè) dist 目錄,里面的經(jīng)過(guò)壓縮的靜態(tài)文件.

Hbuilder 發(fā)行打包

在使用 Hbuilder 制作安裝包前,請(qǐng)將 入口文件 修改成 dist/index.html . 然后可以安心的打包了.

兼容 mui.js

對(duì)于兼容 mui 部分函數(shù)的問(wèn)題,已經(jīng)在移植部分函數(shù)到Utils中,在未來(lái)的更新中會(huì)慢慢移植.

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。