wjsljc
wjsljc
  • 发布:2018-06-19 15:26
  • 更新:2023-01-06 11:15
  • 阅读:10673

vue+webapck+hbuilder实时热更新开发APP经验分享

分类:HTML5+
Vue

###vue+webapck+hbuilder实时热更新开发APP经验分享

此项目设计的最初目的是为了解决使用 vue+webpack 自动化构建并实时同步手机热更新调试而诞生,告别在html引入vue的low操作。截止目前,DCloud 官方并提供一套完整的 vue+webpack+hbuilder 实时开发调试的文章,只是零零散散有人去构建一些自己的项目,并不能很好地教会或者引导大量开发者使用该开发模式进行开发。本项目以构建流程为主,适量 demo 为辅,印证了 vue+webpack+hbuilder 实时调试以及打包的可行性,为开发者提供多开发种选择。
该项目应现阶段APP构造方式构建了两个APP,一个为SPA(单页面应用),一个为MPA(多页面应用),分别采用不同的方式构建,满足不同需求的开发。
需要注意的是,两个APP都几乎没有展示内容的业务逻辑,你可以把它理解为DCLOUD的muiAPP,做UIdemo的展示。SPA使用的是mint-ui(饿了么)MPA使用的是cube-ui(滴滴),两套UI都仿官方网站做成了类似MUIapp展示的方式并做了很多实用性扩展,方便大家阅读与调用。并且验证PLUS在vue+webpack构建方式下的各类使用情况。更多的AQ可以在APP中的‘ABOUT’或者'INTRODUCE'中得到解答。
SPA请参照:https://github.com/wjsljc/vue-webpack-mint-for-hbuilder
MPA请参照:https://github.com/wjsljc/vue-webpack-cube-for-hbuilder

使用步骤

###下载代码
MPA

$ git clone https://github.com/wjsljc/vue-webpack-cube-for-hbuilder.git  
$ cd vue-webpack-cube-for-hbuilder  
$ npm install

SPA

$ git clone https://github.com/wjsljc/vue-webpack-mint-for-hbuilder.git  
$ cd vue-webpack-mint-for-hbuilder  
$ npm install

在浏览器中调试调试

$ npm run dev

MPA
浏览器地址为:http://localhost:8080/html/index.html
SPA
浏览器地址为:http://localhost:8080/index.html

真机同步调试

$ npm run dev

MPA
在 HBuilder 中设置应用入口地址为 本地服务器:端口号/html/index.html
SPA
在 HBuilder 中设置应用入口地址为 本地服务器:端口号/index.html
如 192.168.11.102:8080/html/index.html

请确保手机与本地服务在同一网段,否则无法访问本机的服务。

编译后真机同步调试

$ npm run build
  • 把 dist 目录下的文件复制到 HBuilder 项目下
  • 设置起始页为 html/index.html MPA
  • 设置起始页为 index.html SPA
  • 真机运行调试

主要架构以及特色

vue + webpack + cube-ui/mint-ui + hbuilder

  • UI模块和PLUS模块独立展示,参考使用各取所需
  • UI是对cube-ui/mint-ui官网demo的仿造与实际实践,采用的是后编译,100%迁移以及额外的扩展,更多的自定义demo展示与结合APP的运用,更加符合一款APP的基础需求
  • PLUS对5+SDK的的集成运用,对APP常用的几个功能进行了展示,验证5+在vue中的使用
  • 索引页面、登陆与登出,登陆超时、广告弹出等等功能的基础实现原理,使得APP更加“高仿”
  • 对公共函数的封装、组件的封装、对公用代码mixin的使用等也体现了作者对APP的态度

快速上手

两套框架都基于vue-cli当前的版本进行构建,至于为什么不用4.x进行构建在app中进行了回答。
无论是SPA还是MPA开发者可以直接对项目进行修改复用,10分钟快速上手,方便不熟悉的开发者进行框架搭建。对UI也进行了两套完整的扩展解决方案,更贴近真是开发,可以直接复制粘贴。
PS:希望可以帮到大家,如果帮助到了您,请多多点赞!

5 关注 分享
Trust l***@sina.com 菜鸡 负伍 爱折腾的章鱼猫

要回复文章请先登录注册

爱折腾的章鱼猫

爱折腾的章鱼猫

配置简单,调试方便,此致敬礼
2023-01-06 11:15
5***@qq.com

5***@qq.com

没搞懂
2020-03-24 16:22
3***@qq.com

3***@qq.com

app的代码有吗?只看到spa和mpa
2019-02-25 17:43
菜鸡

菜鸡

给大佬赞一个
2018-11-16 10:29