VUE举例

最新推荐文章于 2024-10-24 19:49:07 发布

原创最新推荐文章于 2024-10-24 19:49:07 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

自己学习同时被 3 个专栏收录

43 篇文章

订阅专栏

16 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

本文介绍了VUE单页面的使用，适合后端人员编写页面，给出了简单引用示例，包含路由引用、http请求等。还提及VUE全家桶npm webpack打包，适用于大型前端项目，如营销活动，给出安装NPM教程链接及项目启动、打包命令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE单页面使用、

适合后端开发人员，某一个页面的编写，简单引用即可

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>superTv</title>
<script src="js/jquery-2.1.3.min.js"></script>

简单引入
<script src="js/vue.min.js"></script>

路由引用
<script src="js/vue-router.min.js"></script>

http请求
<script src="js/vue-resource.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="https://res.suning.cn/project/ssa/script/f6fa2c0f/ssa.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<div class="container">
<a id="href_true" style="display: none;"></a>
<input type="text" value="0" id="flg" name="flg">
<div class="title"></div>
<div class="rules fl">
<div class="rules-btn" id="rules-btn"></div>
<div class="rules-box boxs" id="rules-box">
<div class="rules-txt-box">
<div class="rules-txt">

页面引入到这里，路由之间的跳转也是替换这里
<div id="app">
<router-view></router-view>
</div>
</div>
<div class="rules-bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>

</div>

下面要被引用的ID
<script type="x-template" id="registerAgreement">
<div id="path" data-from="/registerAgreement">
   <div class="superTvBackground">
<div class="button-list">
    <button class="buts superTvBackgroundLeftBtn" id="superTvBackgroundLeftBtn"></button>
          <button class="buts superTvBackgroundCenterBtn" id="superTvBackgroundCenterBtn"></button>
    <button class="buts superTvBackgroundRightBtn" id="superTvBackgroundRightBtn"></button>
</div>
   </div>
</div>
</script>

// 当前路由的内容ID
template: '#registerAgreement',
data: function () {
return {}
},
mounted: function () {
$(".title").html("注册协议");

JSONP请求
var _v=this;
_v.$http.jsonp('*/activity/activity_5002_getTemplate',{
params: {
actId:actId,
format : 'jsonp',
cb: 'callback'
},
jsonp : 'callback',
jsonpCallback : 'callback'
}).then(function(res){
if(res.data.statuSCode==10000){
var result = res.data.result.list;
$.each(result, function(i, sale){
   if(i == 0) {
       sevenActUrl = sale.redirectUrl;
   } else if(i == 1) {
       prizeActUrl = sale.redirectUrl;
   } else if(i == 2) {
       lowPriceActUrl = sale.redirectUrl;
       jump = JSON.parse(lowPriceActUrl);
       jumpParams = {
'position': -1,
'jump': jump
};
   }
});
}
}),function(){
};
}
};

路由列表

var routes = [
{path: '/', redirect: '/registerAgreement'},
{path: '/registerAgreement', component: registerAgreement, name: 'registerAgreement'},
];

var router = new VueRouter({routes: routes});

var app = new Vue({router: router}).$mount('#app');

计算当前页面的字体大小，rem

!(function (win) {
var setBasicFontSize = function () {
var element = win.document.documentElement;
element.style.fontSize = element.clientWidth / 7.2 + 'px';
};
setBasicFontSize();
win.addEventListener("DOMContentLoaded", setBasicFontSize, false);
win.addEventListener("resize", setBasicFontSize, false);
})(window);

</script>
</body>
</html>

VUE全家桶npm webpack打包完整的,适合大的前端项目，比如营销活动

安装NPM

这个URL是看到比较全的教程 https://www.cnblogs.com/goldlong/p/8027997.html

npm run start 项目即可启动

上线打包前npm run build