uni-app打包web项目(uni-app开发vue网页应用)

uni-app是什么

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

本文内容

使用 uni-app 这个平台进行开发web应用,语法是Vue.js的。

准备

1、下载 HBuilder 下载地址:htttps://hx.dcloud.net.cn/
2、创建项目

uni-app打包web项目(uni-app开发vue网页应用)_第1张图片

uni-app打包web项目(uni-app开发vue网页应用)_第2张图片

3、开发

代码

pages/index/index.vue





pages/resinfo/resinfo.vue





打包设置

需要前往 manifest.json 这个文件进行设置。具体设置请参考下图:

uni-app打包web项目(uni-app开发vue网页应用)_第3张图片

打包

打包设置完成之后,就可以进行打包。

uni-app打包web项目(uni-app开发vue网页应用)_第4张图片

发起打包之后,系统就会自动进行编译,这个时候只需要进行等待。

uni-app打包web项目(uni-app开发vue网页应用)_第5张图片

打包完成后,就可以看到一个 static 文件夹和 index.html 文件。

uni-app打包web项目(uni-app开发vue网页应用)_第6张图片

把这些上传到服务器就可以政策访问。

截图演示

运行效果如图。

uni-app打包web项目(uni-app开发vue网页应用)_第7张图片

线上演示

http://demo.likeyunba.com/uniapp-web-demo/#/

源码

https://likeyun.lanzout.com/iEh0R0pzgaah

作者

TANKING

学习请教:sansure2016

你可能感兴趣的:(uni-app打包web项目(uni-app开发vue网页应用))