H5中的HTML引入VANT以及其他ui组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css" />
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
</head>
<style>
.xaaccvv {
width: 7.5rem;
height: 1rem;
background-color: red;
}
</style>
<body>
<div id="Vue">
<div>
<van-tabs v-model="active">
<van-tab title="标签 1">
<div class="xaaccvv"></div>
</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
</div>
</div>
</body>
<script>
new Vue({
el: "#Vue",
data: {
active: 0,
},
methods: {},
created() {
(function (win, doc) {
if (!win.addEventListener) return;
var html = document.documentElement;
function setFont() {
var cliWidth = html.clientWidth;
if (cliWidth > 750) {
cliWidth = 750;
}
html.style.fontSize = 100 * (cliWidth / 750) + "px";
}
win.addEventListener("resize", setFont, false);
doc.addEventListener("DOMContentLoaded", setFont, false);
})(window, document);
},
});
</script>
</html>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
标签内只需要引入自己所需要的ui框架链接
如果需要ajax请求获取数据 则在methods中创建
$.ajax({
type: "get", //请求方式
async: false,
url: "",
data: {}, //传值给后台
dataType: "json",
success: function (res) {
console.log(res);
},
});