为了账号安全,请及时绑定邮箱和手机立即绑定

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

2017.12.11 10:00 4417浏览

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


  • 开发技术
    jquery + vue + vue-router + axios
  • 开发流程
    1.新建一个good.html 页面
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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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文件,注册一个组件

goods.js
const List = function(resolve, reject) {
    $.get('good.html').then(function(res) { // 注意$.get(url)
        resolve({ // 这里是构造一个component
            template: res,
            data: function() {
                return {
                    list: [],
                }
            },
            mounted: function() {

            },
            methods: { // 注意此时在methods 里面 function 不可简写 ,必须写成一下形式
                transferRoute: function() {
                    this.$router.push({
                        path: '/detail/1'
                    });                 
                },
            }

        });
    })
}

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

file.js
//  goods 模块
document.write('<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./list/list.js" charset="utf-8"></script>');
document.write('<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./list/details.js" charset="utf-8"></script>');

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

// 路由配置(和vue-cli一样)
const routes = [
    { path: '/', component: List },
    { path: '/list', component: List }, // 注意 !这里的List 就是good.js里面实例 List,以下同理
    { path: '/detail/:id', component: Detail },
  ];

//  实例化路由
const router = new VueRouter({
      routes 
 });

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">
        <!--css  -->

        <!-- js -->
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./lib/js/jquery.js" charset="utf-8"></script>
        <!-- 先引入 Vue -->
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./lib/js/vue.js"></script>
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./lib/js/vue-router.js"></script>
        <!--file,如果上面没有把各模块的js文件整合到file.js文件,则逐个引入-->
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/js/file.js" type="text/javascript" charset="utf-8"></script>
        <!-- main.js -->
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>

好了,到这里就是一个传统开发模式下的单页面开发的流程,小记小记~,若各位有更好的方案,尽情赐教,小女子不胜感激~

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

3人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消