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

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`.若是全局须要加统计,全局执行的函数,能够放在这个文件里面.

`./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: {
    "/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栏目中能够看到页面加载速度
• 能够查看元素

基本上就是一个简化的开发者工具栏,对于调试来讲很是简便了.

打包

npm run build
复制代码

运行命令后会有一个dist目录,里面的通过压缩的静态文件.

Hbuilder 发行打包

在使用 Hbuilder 制做安装包前,请将入口文件修改为dist/index.html. 而后能够安心的打包了.

兼容 mui.js

对于兼容 mui 部分函数的问题,已经在移植部分函数到Utils中,在将来的更新中会慢慢移植.

常见问题