首页手记 vue+vue-router+jquery...

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

标签：

JQuery Vue.js

絮叨：
前段时间要做一个混合开发 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>

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

点击查看更多内容