2分六合

  • 热门专题

vue2.0构建淘票票webapp

作者:canfoo#!  发布日期:2016-12-26 20:23:33
Tag标签:    
  • 项目描述

    之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务。

    前端技术栈:vue2。0 + vue-router + vuex + mint-ui 

    后台技术栈:nodejs + express

    项目地址:https://github.com/canfoo/vue2.0-taopiaopiao

    废话先不多说,先晒晒预览效果,过过瘾:

        

        

    项目架构

    本项目采用vue2.0栈构建前端页面,采用express搭建后台服务,主要目录如下:

     build
     config 
     src //前端主要开发目录
      --assets //存放前端静态资源
      --components //存放组件
        --store //vuex数据流管理
        --views //页面试图,由vue-router引入
        --App.vue 
        --main.js //前端入口文件
    server //后台服务
       --bin //启动后台服务配置
       --database //存放页面所需要的json数据
       --public //前端部署时存放在后台服务的位置
       --routes //路由于请求接口管理
       --views //前端模板存放位置
       --app.js //后台服务入口

    主要特色功能概览

    1. 通过vue自定义指令实现正在热映等列表中图片按需加载,源码位置在/vue2.0-taopiaopiao/src/components/lazyload.js

    2。 通过组件设计思想实现电影院详情中图片滑动变速、选中动画等功能,源码位置在/vue2。0-taopiaopiao/src/components/cinemaDetai/film。vue

    3. 采用vuex管理每次加载数据自动判断是否需要显示loading,源码位置在/vue2.0-taopiaopiao/src/store/loading/mutations.js

    4。 采用mint-ui实现城市分类选择等样式,其项目主页为http://mint-ui。github。io/#!/zh-cn

    ...

    学习心得

    vue2.0相对于vue1.0还是拥有比较大的变化,废除了很多原有的接口,比如1.0的为了解决组件通信的$dispatch和$broadcast弃用掉,转而提倡更多简明清晰的组件间通信和更好的状态管理方案,如vuex。事实证明,用vuex可以轻易解决组件间通信,而且容易维护和引用。还有2.0将v-el 和 v-ref 合并为一个 ref 属性,使用方法跟react里的refs是一样的。这里只是简单举两个例子,如果还停留在1.0的童鞋,可以直接到官方网站中查看。如果还不了解同时还在犹豫要不要入手vue的童鞋,这里强烈建议赶快拿起vue上来撸了,为什么呢,因为vue上手快,而且mvvm的数据双向绑定会让你省去很多无用的事,再配合第三方提供的方案,比如vue-router和vuex,可以将单薄的vue包装成一个强大的栈,对于移动端中、大项目快速开发与良好维护是一个非常不错的选择。

    写此博客的目的主要是让大家简单了解下这个项目,而没有具体分析代码细节,因为个人觉得vue官网已经把很多知识点写得很详细了,没必要再复述了,如果对此项目有兴趣的童鞋,请到项目github地址阅读源码,如果有问题,可以在这里指出,让我们共同进步。

    觉得这个项目对你有帮助的话,请给个star吧,^9^

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规
  • <tbody id='57r17'></tbody>

  • <tfoot id='57r17'></tfoot>

      <legend id='57r17'><style id='57r17'><dir id='57r17'><q id='57r17'></q></dir></style></legend>
      <i id='57r17'><tr id='57r17'><dt id='57r17'><q id='57r17'><span id='57r17'><b id='57r17'><form id='57r17'><ins id='57r17'></ins><ul id='57r17'></ul><sub id='57r17'></sub></form><legend id='57r17'></legend><bdo id='57r17'><pre id='57r17'><center id='57r17'></center></pre></bdo></b><th id='57r17'></th></span></q></dt></tr></i><div id='57r17'><tfoot id='57r17'></tfoot><dl id='57r17'><fieldset id='57r17'></fieldset></dl></div>

          <bdo id='57r17'></bdo><ul id='57r17'></ul>

          1. <li id='57r17'><abbr id='57r17'></abbr></li>