美文网首页
vue-实战去哪儿项目

vue-实战去哪儿项目

作者: 唐人不自醉 | 来源:发表于2018-09-20 15:12 被阅读222次

运行项目

  • npm install
  • npm run dev

项目展示

项目涉及到技术栈:

  • vue:Vue、Vue-router、Vuex、Vue-cli
  • 插件:vue-awesome-swiper、better-scroll Axios
  • CSS的预处理框架 stylus
  • api 后台数据接口

主要特点

  • 组件化自适应布局
  • 代码,简洁,易维护
  • 兼容大部分浏览器
  • 性能优化

项目结构部分

Header部分

  • 引入 Iconfont
  • 首页轮播
  • 图标区域轮播
  • 使用axios获取接口数据
  • 组件间数据传递

城市选择页面开发

  • Better-scroll的使用和字母表布局
  • eventbus 传值
  • 列表性能优化
  • 搜索逻辑实现
  • Vuex实现数据共享
  • LocalStorage实现页面数据持久存储
  • 使用keep-alive优化路由页面性能

详情页面开发

  • 动态路由配置及banner布局
  • 公用画廊组件拆分
  • 渐隐渐显的header效果实现
  • 递归组件实现详情列表
  • 画廊动画效果封装

项目源码

相关文章

  • vue-实战去哪儿项目

    运行项目 npm install npm run dev 项目展示 项目涉及到技术栈: vue:Vue、Vue-r...

  • 实战去哪儿项目

    这个项目对于vue入门和入门提升,而且对移动端布局和性能优化有很大帮助和提升 接口是模拟json地址,虽然不能操作...

  • vue-项目实战

    最近花了一个多月时间学习了下vue,并开发了一个基于宠物视频的项目, 分为三块,vue-web,vue-h5, 以...

  • vue-cli搭建cnode社区

    一、准备工作 1.使用vue-­cli脚手架搭建项目,参考我的文章:使用使用vue-­cli脚手架搭建项目2.安装...

  • vue慕课网去哪儿实战项目笔记

    1.移动端解决1px边框问题,使用border.css;https://www.cnblogs.com/jy136...

  • 由修改路由懒加载引起的

    layout: posttitle: 由修改路由懒加载引起的tags:- Vue- 笔记 项目背...

  • 使用 vue-cli 脚手架一键搭建工程

    五部走: 全局安装vue-­cli 进入目录–初始化项目 进入项目 安装依赖 启动项目 目录结构的分析 一、├──...

  • Vue-项目

    一.环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行nod...

  • freeCodeCamp 旅途10 - 算法实战

    项目实战:回文检查器 项目实战:罗马数字转换器 项目实战:凯撒密码 项目实战:电话号码验证器 项目实战:收银机

  • pyspider 实战项目之爬取去哪儿

    阅读文本大概需要 13 分钟。 通过之前的文章介绍,你现在应该对 pyspider 有了一定的认识。如果你还不清楚...

网友评论

      本文标题:vue-实战去哪儿项目

      本文链接:https://www.haomeiwen.com/subject/mdhnnftx.html