项目- Vue全家桶实战去哪网App

最近在学习Vue,花了几天时间跟着做了这个项目,算是对学习Vue入门的一个总结,欢迎同学们star

去哪网APP

? 项目演示地址:http://118.25.39.84

基于 Vue 全家桶 (2.x) 制作的 去哪网APP项目,项目完整、功能完备、UI美观、交互一流。

点击查看效果

技术栈

【前端】

  • Vue:构建用户界面的 MVVM 框架,核心是响应的数据绑定和组系统件
  • vue-router:为单页面应用提供的路由系统,项目上线前使用了路由懒加载技术,来异步加载路由优化性能
  • vuex:Vue 集中状态管理,在多个组件共享某些状态时非常便捷
  • axios:服务端通讯。基于 Promise 的网络请求插件
  • vue-lazyload:第三方图片懒加载库,优化页面加载速度
  • better-scroll:iscroll 的优化版,使移动端滑动体验更加流畅
  • stylus:css 预编译处理器
  • ES6:ECMAScript
  • vue-awesome-swiper: 图片轮播插件
  • fastClick: 解决300毫秒点击事件延迟问题
  • stylus-loader: 一像素边框问题 新一代语法,模块化、解构赋值、Promise、Class 等方法非常好用

【后端数据】

  • 使用本地模拟数据

【自动化构建及其他工具】

  • vue-cli:Vue 脚手架工具,快速初始化项目代码
  • ESLint:代码风格检查工具,规范代码书写

收获

  1. 对 vue 的组件、指令、选项、模版渲染、事件绑定、计算属性等有了一定了解
  2. 了解了 vue 组件之间的交互、传值
  3. 熟悉了在 vue 项目中使用第三方插件(组件)
  4. 熟悉了组件化、模块化的开发思维
  5. 熟悉了 vue-router 控制路由和子路由的方式
  6. 再次熟悉项目开发流程:项目分析设计 -> 项目环境搭建 -> 依赖安装 -> 页面架构设计 -> 组件开发 -> 测试联调 -> 发布上线
  7. 体会到组件化、模块化开发带来的便捷
  8. 体会到将对象封装成类(ES6 class) 的便捷性,以及利用工厂方式初始化类实例
  9. 学会利用过渡效果及动画效果制作良好的用户交互体验

Build Setup

# clone the repo into your disk.
$ git clone https://github.com/1049759078/travel.git

# install dependencies
$ npm install

# serve with hot reload at localhost:8080
$ npm run dev

# build for production with minification
$ npm run build

License

The code is available under the MIT license.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张戈的专栏

关于网站图标favicon.ico那点事儿,你造吗?

众所周知,联盟成员导航是中国博客联盟的特色之一。而网站图标则是导航的装饰之一,起到锦上添花的作用,让页面更精美耐看。 但是随着成员数量的增长,图标便成了页面的拖...

85860
来自专栏小特工作室

WinForm中播放视频示例(含源码)

1背景 这几天一老友要求我做个小软件,在WinForm播放视频.印象中微软有个WM控件直接可以使用,晚上研究下 2实现方式 2.1微软草根 最简单的方式,是...

23960
来自专栏小樱的经验随笔

【全网最全的博客美化系列教程】04.访客量统计的实现

相信大家也看到了右侧公告栏的访客量统计的效果,我们可以看到有两个样式,一个是单独统计人数的,一个是统计访客来源的,是不是感觉还挺不错的?

11960
来自专栏QQ会员技术团队的专栏

【开源公告】VasSonic轻量级的高性能的Hybrid框架正式开源

VasSonic取名于索尼动画形象音速小子,是腾讯QQ会员 VAS团队研发的一个轻量级的高性能的Hybrid框架,专注于提升页面首屏加载速度,完美支持静态直出页...

23760
来自专栏编程

前端三大框架大杂烩

摘要:从angular的诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有其特定的原因和背景。不同的开发者选择时,也是依...

36750
来自专栏从零开始学自动化测试

Selenium2+python自动化34-获取输入框联想词

前言 最近有小伙伴问百度输入后,输入框下方的联想词如何定位到,这个其实难度不大,用前面所讲的元素定位完全可以定位到的。 本篇以百度输入框输入关键字匹配后,打印出...

37550
来自专栏IT技术精选文摘

Facebook构建高性能Android视频组件实践之路

其他的视频新闻类型可以播放生成的视频,赞助商的信息,或者短动画。 CoreVideoComponent是一个有着最简特性的任何视频新闻都需要的MountSpec...

415100
来自专栏知晓程序

开发 | 用 7 天时间,他做了个仿麦当劳的小程序

作为全栈的学习者,初学微信小程序,抱着试试做心态,一个星期内初步完成了仿「i 麦当劳」小程序的项目。

13440
来自专栏企鹅号快讯

前端三大框架vue,angular,react大杂烩

摘要:从angular的诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有其特定的原因和背景。不同的开发者选择时,也是依...

26160
来自专栏FD的专栏

前端下半场:构建跨框架的 UI 库

跨框架的 UI 库,即前端 UI 库可以不经任何修改,直接能运行在 React、Angular、Vue 等框架上。

11810

扫码关注云+社区

领取腾讯云代金券