用vue快速开发app的脚手架工具
前言多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本文最大特点:
项目地址 GitHub 使用手册MogoH5+ 是一个 vue 多页面 脚手架工具,结合 H5+可以快速开发安卓与苹果 APP. 即使不适用 Hbuilder 打包成 APP,本脚手架同样可以作为多页面网页生成的参考项目. 特性
这些特性其实不是什么新鲜特性,只是单独在 Hbuilder 无法使用. 快速上手直接下载项目然后根据需求定制打包,最后通过 Hbuilder 云打包即可生成 APP. 本文自带一个案例是使用 VantUI 开发的几个界面,如果你喜欢其他 UI 同样可以替换成其他的 UI. 使用主要怎么使用 MogoH5+做正式的开发,在开发过程中一定要遵守 目录规则,否则会有意想不到的错误. 目录结构新建页面假如我们要新建一个名称为 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 添加. 只有开发的时候才会有跨域问题,打包后的文件网址会被替换成被代理的网址,因此发送请求一定要加上名称 DOUBANAPI 调试在 Hbuilder 中调试会有诸多问题,比如:
使用 VConsole,调试的问题基本就脱离 Hbuilder 了,使用 VConsole 主要优点如下
基本上就是一个简化的 开发者工具栏,对于调试来说非常简便了. 打包运行命令后会有一个 dist 目录,里面的经过压缩的静态文件. Hbuilder 发行打包在使用 Hbuilder 制作安装包前,请将 入口文件 修改成 dist/index.html . 然后可以安心的打包了. 兼容 mui.js对于兼容 mui 部分函数的问题,已经在移植部分函数到Utils中,在未来的更新中会慢慢移植. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |