如何在嵌套的app中运用vue去写单页面H5 _如何在

智者不为愚者谋，勇者不为怯者死。这篇文章主要讲述如何在嵌套的app中运用vue去写单页面H5相关的知识，希望能为你提供帮助。
本文主要介绍移动端。为了避免移动端兼容出现各种奇奇怪怪的bug,所以秉承着能不用复杂的语法就不用，尽量用最基础的语法。可用惯了各种ES6语法的童鞋们，写原生真是头疼，再加上各种领导催工期，肯定是内心各种烦躁。这里介绍一下，如何在H5中运vue 去写，嵌套到用到app中。

首先引入vue CDN ,记得去扒一个vue.js. 下载下来，不要用htpp,这样可以避免有些模块因为网卡导致，页面加载错乱。

< script src="https://www.songbingjia.com/android/js/vue.min.js"> < /script>

< div id="app"> < /div> new Vue({ el: "#app", data:function(){} }) 2.你肯定也想用个uI库，那本人推荐一个vant . 使用看官网。有的需要vant.Toast 。安卓6.0 以下常出现数据加载不出的问题。看公司是否全兼容。

< script src="http://img.readke.com/220506/05105C603-1.jpg"> < /script>

3.获取后台数据ajax 就够用了。去下载一个本地的吧.

< script src="https://www.songbingjia.com/android/js/jquery-2.0.0.min.js"> < /script>

4. 移动端布局如果是少量的用百分比，display:flex ,这个要做兼容。 rem 也是可以用的。

// 记得UI尺寸/100 = 实际值 rem 。默认UI尺寸750px. 小于750px 的手机请用百分比。像vivio6, oppo低版本手机常出现兼容问题。不过现在大部分手机都已适用，看公司是否全兼容。
< script> var fontSize = 0; (function (doc, win) { //获取html节点和事件和屏幕变化改变字体大小 const docEl = doc.documentElement, resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, recalc = function () { const clientWidth = docEl.clientWidth; if (!clientWidth) return; //排除宽度没值 if (clientWidth > = 750) { docEl.style.fontSize = ‘100px‘; } else { docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px‘; } }; function fontSizeFun() { var size = 0; var clientWidth = docEl.clientWidth; if (!clientWidth) return; //排除宽度没值 if (clientWidth > = 750) { size = 100; } else { size = 100 * (clientWidth / 750); } return size; } if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener("DOMContentLoaded", recalc, false); fontSize = fontSizeFun(); win.addEventListener(resizeEvt, function () { fontSize = fontSizeFun(); }, false); doc.addEventListener("DOMContentLoaded", function () { fontSize = fontSizeFun(); }, false); })(document, window); < /script>

5. ES6 语法的兼容处理。

< script src="http://img.readke.com/220506/0510561I3-3.jpg"> < /script>

6. 没有用vue-router, 用到的是 window.location.href 跳的，比较生硬。看到网上有一种方法：
然后在index.html 通过router-view来渲染A和B两个页面。 A,B作为它的组件。另外的一个嵌套app的H5 , 是也是通过window.location.href 跳的或者a标签。在浏览器可以正常下载，但移动端不行。查了好多文档，并没有太好的解决方案，app 可以通过调取用插件打开本地文件，嵌套的H5暂时没有好的处理方案。 【如何在嵌套的app中运用vue去写单页面H5】