Preface多页面适用于结构比较简单的页面，因为简答页面使用router太麻烦。这个脚手架就是为这样的场景开发的。使用脚手架配合Hbuilder也可以快速使用Vue开发Android和IOS应用。本文最大特点：webpack4多页面跨域Proxy代理VConsole移动端调试es6/es7babel转换项目地址GitHub用户手册MogoH5+是一款vue多页面脚手架工具，结合H5+可以快速开发安卓和苹果APP。即使不适用Hbuilder打包成APP，这个脚手架也可以作为多页网页生成的参考工程。特性支持npm生态，支持vue语法，vue生态，如vux,mint,vant支持ES6/ES7语法使用VCon??sole调试VSCode友好局域网方便调试兼容部分mui语法这些特性不是新特性，但是不能单独在Hbuilder中使用。直接快速下载工程，然后根据需要自定义打包，最后通过Hbuilder云打包生成APP。本文的一个案例是使用VantUI开发的几个界面。如果你喜欢其他的UI，也可以换成其他的UI//1.安装模块npmi//或者yarn//2.调试npmstart//把manifest.json的`pageentry`改成http://your_ip:8082///3.打包npmrunbuild主要是如何使用MogoH5+进行正式开发。在开发过程中，一定要遵守目录规则，否则会出现意想不到的错误。目录结构。├──docs//文档├──index.html//入口模板├──jsconfig.json//js配置├──manifest.json//hbuilder入口文件├──src│├──components//组件文件夹││└──列表。vue//组件│├──index.js//首页入口文件│├──index.vue//首页vue文件│├──page//页面│└──utils//工具├──解包//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`别名，可以这样直接加载`importcommonfrom"Utils/common"`。request发送request请求库demo使用的是axios，你也可以封装任何你喜欢的库。常见的请求库有fetch和request、SuperAgent、jquery-ajax。跨域由于npmstart后，调试网页挂在局域网上，作为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},...}如果业务域名较多，可以在代理中继续添加。只有在开发的时候才会出现跨域问题。打包后的文件URL会被代理URL代替，所以名称DOUBANAPIrequest({url:DOUBANAPI+"/bookList"});在Hbuilder中调试会遇到很多问题，比如：不能直接打印数组、对象，需要转成字符串。即使用webview调试，还是打印不出数组，在mac上使用也很不方便。使用VCon??sole，调试问题基本脱离了Hbuilder。使用VCon??sole的主要优点如下：可以打印数组，对象可以查看requests，cookies，Localstorage可以在System栏目中看到。页面加载速度可以查看，元素基本是一个简化的开发者工具栏，非常方便调试。npmrunbuild打包后运行命令，会出现一个dist目录，里面是压缩后的静态文件。使用Hbuilder制作安装包前，请将入口文件改为dist/index.html。然后就可以安心打包了。与mui.js的兼容针对mui部分功能的兼容问题，部分功能已经移植到Utils中，在以后的更新中慢慢移植。经常问的问题
