用vue快速开发app的脚手架工具

前言

多页面应用于结构较于简单的页面,因为简答的页面使用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`.如果全局需要加统计,全局执行的函数,可以放在这个文件里面.