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


Posted in Javascript onJune 11, 2018

前言

多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来.

使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP.

本文最大特点:

  1. webpack4
  2. 多页面
  3. 跨域Proxy代理
  4. VConsole移动端调试,手机上的开发者工具
  5. es6/es7 babel 转换

项目地址 GitHub

使用手册

MogoH5+ 是一个 vue 多页面 脚手架工具 ,结合 H5+可以快速开发安卓与苹果 APP.

即使不适用 Hbuilder 打包成 APP,本脚手架同样可以作为多页面网页生成的参考项目.

特性

  1. 支持 Npm 生态
  2. 支持 vue 语法,以及 vue 生态,比如 vux,mint,vant
  3. 支持 ES6/ES7 语法
  4. 使用 VConsole 调试
  5. VSCode 友好
  6. 局域网便捷调试
  7. 兼容部分 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 中调试会有诸多问题,比如:

  1. 不能直接打印 数组 , 对象 ,需要转成字符串.
  2. 即使使用 webview调试 ,仍然不能打印出数组,在 mac 上使用也非常不方便.

使用 VConsole ,调试的问题基本就脱离 Hbuilder 了,使用 VConsole 主要优点如下

  1. 可以打印数组,对象
  2. 可以查看请求,cookie,Localstorage
  3. 在System栏目中可以看到页面加载速度
  4. 可以查看元素

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

打包

npm run build

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

Hbuilder 发行打包

在使用 Hbuilder 制作安装包前,请将 入口文件 修改成 dist/index.html . 然后可以安心的打包了.

兼容 mui.js

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js tab效果的实现代码
Dec 26 Javascript
javascript操作referer详细解析
Mar 10 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
js实现随机数小游戏
Jun 28 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 #Javascript
vue非父子组件通信问题及解决方法
Jun 11 #Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 #Javascript
详解.vue文件解析的实现
Jun 11 #Javascript
vue filters的使用详解
Jun 11 #Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 #Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
js常见遍历操作小结
2019/06/06 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
np.random.seed() 的使用详解
2020/01/14 Python
Python 实现一个简单的web服务器
2021/01/03 Python
优秀经理事迹材料
2014/02/01 职场文书
基督教婚礼主持词
2014/03/14 职场文书
股权投资意向书
2014/04/01 职场文书
一分钟演讲稿
2014/04/30 职场文书
python自动化八大定位元素讲解
2021/07/09 Python