用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`.如果全局需要加统计,全局执行的函数,可以放在这个文件里面.
`./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
中,在未来的更新中会慢慢移植.
用vue快速开发app的脚手架工具的更多相关文章
- 如何优雅的使用vue+vux开发app -03
如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...
- 如何优雅的使用vue+vux开发app -02
如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...
- 如何优雅的使用vue+vux开发app -01
如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...
- 十九. 想快速开发app,需要找外包吗?
健生干货分享:第19篇 摘要:最近和两位准备开发app的创业者聊天,他们之前没有移动互联网的相关经验,有的是想法和资金.他们在纠结:想快速开发app,需要找外包吗? 最近和两位想开发app的创业者聊天 ...
- Vue+cordova开发App
Vue+cordova开发App https://www.imooc.com/article/70062
- 全面超越Appium,使用Airtest超快速开发App爬虫
想开发网页爬虫,发现被反爬了?想对 App 抓包,发现数据被加密了?不要担心,使用 Airtest 开发 App 爬虫,只要人眼能看到,你就能抓到,最快只需要2分钟,兼容 Unity3D.Cocos2 ...
- 【转载】如果快速开发APP&创业
先贴原文所在个人博客: http://uikoo9.com/ 今天看了一些这个人的文章,还是有一定见解的,比如下面这篇 <如何快速开发出一个高质量的APP——创业谈> http://uik ...
- cordova+vue混合式开发App
应要求第一次使用cordova打包了一下vue写的app项目,期间遇到了不少问题,整理一下流程并记录一下常见问题吧. cordova打包项目需要的环境配置啥的就不具体讲啦,百度一下很多教 ...
- 开发一个 Parcel-vue 脚手架工具
前言 像我们熟悉的 vue-cli,create-react-app 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目.在实际工作中,我 ...
随机推荐
- C# 执行bat文件
private void RunBat(string batPath) { Process pro = new Process(); FileInfo file = new FileInfo(batP ...
- 敏捷冲刺Day1
前言: 之前的各种对教务系统的分析,再加上我们两三天的讨论和一个小时的站立会议,我们做出最终的决定.--我们决定换个项目主题,将原来的教务辅助系统换成现在的校园帮帮帮服务,并在之后会将完成后的计划书附 ...
- 用svmpredict输出的结果为空
源程序:
- Matlab快捷键
1. 在命令窗口(Command Window)中: 1) [上.下键]――切换到之前.之后的命令,可以重复按多次来达到你想要的命令 2) clc――清除命令窗口显示的语句,此命令并不清空当前工作区的 ...
- [剑指Offer] 39.平衡二叉树
题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树. class Solution { public: int Get_Height(TreeNode* root) { if(root == NU ...
- 海盗船长小米首页小船来回摆动CSS3.0效果
海盗船长小米首页小船来回摆动CSS3.0效果,偶然之间看到的,就写了一个. <!DOCTYPE html> <html lang="en"> <hea ...
- BZOJ4866 Ynoi2017由乃的商场之旅(莫队)
显然能重排为回文串相当于出现次数为奇数的字母不超过一个.考虑莫队,问题在于如何统计添加/删除一位的贡献.将各字母出现次数奇偶性看做二进制数,做一个前缀和一个后缀和.在右端添加一位时,更新区间的前缀.后 ...
- I/O复用----select
2018-07-31 (星期二)I/O复用: 一个应用程序通常需要服务一个以上的文件描述符. 例如stdin,stdout,进程间通信以及若干文件进行I/O,如果不借助线程的话,(线程通常 ...
- [NOI2009]管道取珠 DP + 递推
---题面--- 思路: 主要难点在思路的转化, 不能看见要求$\sum{a[i]^2}$就想着求a[i], 我们可以对其进行某种意义上的拆分,即a[i]实际上可以代表什么? 假设我们现在有两种取出某 ...
- Android 字母导航条实现
在Activity中进行功能的实现,需要用到第三方jar包:pinyin4j.jar,此jar包用于将汉字转换为汉语拼音. 首先,设置右侧边栏索引列表(A-Z),并且设置列表点击,Touch事件,点击 ...