用vue快速开发app的脚手架工具
前言
多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来.
使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOSAPP.
本文最大特点:
- webpack4
- 多页面
- 跨域Proxy代理
- VConsole移动端调试,手机上的开发者工具
- es6/es7babel转换
项目地址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.安装模块 npmi//oryarn //2.调试 npmstart//将manifest.json的`页面入口`修改成http://your_ip:8082/ //3.打包 npmrunbuild
使用
主要怎么使用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`别名,可以直接这样加载`importcommonfrom"Utils/common"`.
发送请求
请求库
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
},
...
}
如果有更多业务域名可以继续在proxy添加.
只有开发的时候才会有跨域问题,打包后的文件网址会被替换成被代理的网址,因此发送请求一定要加上名称DOUBANAPI
request({
url:DOUBANAPI+"/bookList"
});
调试
在Hbuilder中调试会有诸多问题,比如:
- 不能直接打印数组,对象,需要转成字符串.
- 即使使用webview调试,仍然不能打印出数组,在mac上使用也非常不方便.
使用VConsole,调试的问题基本就脱离Hbuilder了,使用VConsole主要优点如下
- 可以打印数组,对象
- 可以查看请求,cookie,Localstorage
- 在System栏目中可以看到页面加载速度
- 可以查看元素
基本上就是一个简化的开发者工具栏,对于调试来说非常简便了.
打包
npmrunbuild
运行命令后会有一个dist目录,里面的经过压缩的静态文件.
Hbuilder发行打包
在使用Hbuilder制作安装包前,请将入口文件修改成dist/index.html.然后可以安心的打包了.
兼容mui.js
对于兼容mui部分函数的问题,已经在移植部分函数到Utils中,在未来的更新中会慢慢移植.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。