web之vue+vue-router+jquery 以传统模式开发单页面应用

最新推荐文章于 2024-08-20 18:04:12 发布

若♡

最新推荐文章于 2024-08-20 18:04:12 发布

阅读量284

点赞数

文章标签：前端 vue.js jquery

本文链接：https://blog.csdn.net/weixin_67271870/article/details/127758366

版权

前段时间要做一个混合开发 h5+Android，以及微信公众号开发，商城模块+订单模块由h5开发，想着若以vue-cli开发的话实在不方便，不需要那么多的依赖，每次有不同的页面入口，又要重新更换默认路由和打包，很是麻烦，所以本人就想这时用传统页面或许更简单一些，不要抛弃传统~。

开发技术
jquery + vue + vue-router + axios 开发流程
1.新建一个good.html 页面

复制代码

<div class="container list-page">
<div class="box" v-for="i in 9" :key="i">
<div class="item clearfix" @click="transferRoute">
<div class=" item-img">
<img class="good-img" src="./lib/images/01.jpg" alt="首页图片">
</div>
<div class="fl good-content">
<h3 class="good-title"><em>· </em>{{i}}新概念英语</h3>
<h5 class="good-name">第一册·lesson 1 a private</h5>
<h5 class="good-time">2017-11-25</h5>
<p><span class="good-money">￥298</span><span class="good-btn fr" @click.stop="shophandler()">购买</span></p>
</div>
</div>
</div>
</div>

复制代码

2.新建一个good.js文件，注册一个组件

复制代码

复制代码

3.新建一个file.js文件（这个文件不是必须的，本人只是为了规范化，也可以直接在index.html页面直接引入相应的js文件）

复制代码

复制代码

4.新建一个route.js文件，配置路由

复制代码

5.最后一步，是在入口文件index.html 中引入主要的文件，和实例化vue,以及挂载路由。

<html>
<head>
<meta charset="utf-8">
<title>商品页面</title>
<meta http-equiv="content-type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="./lib/js/jquery.js" charset="utf-8"></script>
<script src="./lib/js/vue.js"></script>
<script src="./lib/js/vue-router.js"></script>
<script src="lib/js/file.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/js/route.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" class="container">
<router-view></router-view>
</div>
<script>
var vm = new Vue({ // 实例化vue,挂载路由
router,
}).$mount('#app');
</script>
</body>
</html>

复制代码

关注