Vue2.5开发去哪网App项目实战记录（根据慕课网课程编写）

慕课网课程链接
目的：只是为了记录自己学习过程中遇到的问题以及整个项目的收获，方便回头复习，以及今后编写项目的一个教程规范，文中基础知识并没有详细介绍，但是附上了相关的学习链接

首先先说下这个项目涉及到的知识点，以及整个开发过程的流程

整个项目中数据的请求主要涉及到Axios，页面路由的控制主要由Vue-Router来实现，另外页面的样式编写是依赖了Stylus,整个项目的主要思想是组件化开发，其中包含页面上的单独组件，公用的组件，以及还讲到了递归组件的使用，涉及到组件的调用可以异步使用，另外还运用到了多个插件，比如vue-awesome-swiper实现了轮播图的效果，better-scroll主要实现了城市列表滑动的需求等

一、Vue基础知识
这部分知识官方API上讲解的非常详细（并且包含视频讲解，非常有心）：https://cn.vuejs.org/v2/guide/index.html添加链接描述

其中需要注意的是：

组件，涉及到了注册，props传值（父向子传值），以及$emit(子向父传值)，另外插槽的使用需要仔细看看，异步组件主要运用到路由中比较多，component: () => import(’@/pages/home/Home’)，为了异步加载路由
动画：主要是transition的应用

比如图片的进入以及消失的渐隐渐现的效果实现

FadeAnimation.Vue： transition 包裹

.<template><div><transition><slot></slot></transition></div>
</template><script>
export default {name:'FadeAnimation'
}
</script><style lang="stylus" scoped>.v-enter,v-leave-toopacity: 0.v-enter-active, .v-leave-activetransition: opacity .5s
</style>

具体使用的时候，只需要fade-animation将需要用到动画的对象包裹起来即可

<fade-animation><gallery:imgs="imgs" v-show="showGallery"@close-gallery="handleCloseGallery"></gallery></fade-animation>

二、Vue-Router的使用
以下为router的基本使用，详细router学习，请点击学习Vue-router官方文档

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: () => import('@/pages/home/Home')},{path: '/city',name: 'City',component: () => import('@/pages/city/City')},{path: '/detail/:id',name: 'Detail',component: () => import('@/pages/detail/Detail')}],scrollBehavior: () => ({x:0,y: 0}),
})

HTML使用

<router-link to="/city"></router-link>

//类似于get请求，将参数拼接到url上，path是路由中path值
this.$router.push({path: '/cabinMaintain',query: {airlinesNumber: airlinesNumber}
})
//类似于post请求，name是路由中的name值
this.$router.push({name: 'CabinMaintain',params: {airlinesNumber: airlinesNumber}
})

获取

this.$route.query.airlinesNumber
this.$route.params.airlinesNumber

注意：
component: () => import(’@/pages/home/Home’)异步加载，目的是点击哪个页面，才开始加载该页面，而不是在首页加载渲染好所有的页面

path: ‘/detail/:id’,动态路由，根据id不同，区分不同的路由页

三、Vuex状态管理，见另一篇文章Vuex 状态管理以及Vuex官方API

四、axios的使用，ajax请求axios官方文档
npm

npm install axios

项目中具体使用

main.js

import axios from 'axios'Vue.prototype.$http = axios

import request from '@/utils/request'export function login(type, params) {return request({url: '/login',method: 'post',params})
}

request.js

import axios from 'axios'
const service = axios.create({baseURL: process.env.BASE_API, // api 的 base_urltimeout: 180000 ,// 请求超时时间withCredentials: true, // 允许携带cookie
})service.interceptors.request.use(config => {return config},error => {Promise.reject(error)}
)service.interceptors.response.use(response => {return response},error => {return Promise.reject(error)}
)export default service

config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',BASE_API: '"http://10.197.72.62:8888"'
})

五、插件以及依赖的使用

轮播图：vue-awesome-swiper ： vue-awesome-swiper

npm

npm install vue-awesome-swiper --save

mount (main.js中)

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'// require styles
import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)

具体使用swiper.vue

<template><div class="wrapper"><swiper :options="swiperOption" v-if="showSwiper"><!-- slides --><swiper-slide class="swiper-img"  v-for="item in swiperList" :key="item.id"><img :src="item.imgUrl" /></swiper-slide><!-- Optional controls --><div class="swiper-pagination" slot="pagination"></div></swiper></div>
</template><script>
export default {name: "HomeSwiper",props:{swiperList:{type:Array,default:[]}},data () {return {swiperOption: {pagination: {el: ".swiper-pagination"},loop:true},};},computed: {showSwiper () {return this.swiperList.length}}
};
</script><style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active {background: #fff;
} </style>

better-scroll : 解决移动端的滚动情况,iscoll的封装。better-scroll

npm

npm install better-scroll --save

使用:(list.vue具体列表页面)

import BScroll from "better-scroll";mounted() {this.scroll = new BScroll(this.$refs.wrapper);},

fastclick：
移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。

npm install better-scroll --save

babel-polyfill :
为了解决ie9和一些低版本的高级浏览器对es6新语法并不支持，而出现白屏的情况

npm install babel-polyfill --save

stylus:
Stylus是一个CSS预处理器为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

六、移动端注意事项
1.index.html

< meta name=“viewport” content=“width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>
手机端不需要放缩

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>travel</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

2.main.js

import 'styles/reset.css'
import 'styles/border.css'

reset.css是手机的适配，border.css是为了解决手机端一像素问题
reset.css

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

border.css

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {content: "\0020";overflow: hidden;position: absolute;
}
/* border* 因，边框是由伪元素区域遮盖在父级* 故，子级若有交互，需要对子级设置* 定位 及 z轴*/
.border::before {box-sizing: border-box;top: 0;left: 0;height: 100%;width: 100%;border: 1px solid #eaeaea;transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {left: 0;width: 100%;height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {top: 0;width: 1px;height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {border-top: 1px solid #eaeaea;transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {border-right: 1px solid #eaeaea;transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {border-bottom: 1px solid #eaeaea;transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {border-left: 1px solid #eaeaea;transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {/* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {.border::before {width: 200%;height: 200%;transform: scale(.5);}.border-top::before,.border-bottom::before,.border-topbottom::before,.border-topbottom::after,.border-topleft::before,.border-rightbottom::after,.border-topright::before,.border-bottomleft::before {transform: scaleY(.5);}.border-right::before,.border-left::before,.border-rightleft::before,.border-rightleft::after,.border-topleft::after,.border-rightbottom::before,.border-topright::after,.border-bottomleft::after {transform: scaleX(.5);}
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {.border::before {width: 300%;height: 300%;transform: scale(.33333);}.border-top::before,.border-bottom::before,.border-topbottom::before,.border-topbottom::after,.border-topleft::before,.border-rightbottom::after,.border-topright::before,.border-bottomleft::before {transform: scaleY(.33333);}.border-right::before,.border-left::before,.border-rightleft::before,.border-rightleft::after,.border-topleft::after,.border-rightbottom::before,.border-topright::after,.border-bottomleft::after {transform: scaleX(.33333);}
}

6.手机端手势touchstart监听有问题，页面会跟着拖拽，而不是列表滑动，需要touchstart.prevent,prevent修饰符阻止默认程序

整个项目路径：

http:https://gitee.com/JiuYueShang/Travel
SSH:git@gitee.com:JiuYueShang/Travel.git

Vue2.5开发去哪网App项目实战记录（根据慕课网课程编写）相关推荐

Vue.js 入门：去哪儿网APP案例学习记录
推荐博客 Vue 2.5 开发去哪儿旅游网站项目记录项目源码 : https://gitee.com/doublesgzl/Travel 第六章项目实战 6-1 环境配置 (建议看下视频) 6 ...
基于Vue开发的电商APP项目——蘑菇街app
基于Vue开发的电商APP项目--蘑菇街项目源码:https://github.com/Limna777/Shopmall.git 1.项目描述 2.使用的插件或第三方库 3.页面主要实现的功能 1 ...
Android开发高级进阶内涵段子APP项目实战视频教程
Android开发高级进阶内涵段子APP项目实战课程视频教程下载.本课程带你从框架入手,开启我们的Android进阶之旅,开始写一步一步完善整个项目. 项目目录: 01.Android进阶之旅与你同行 ...
微信小程序之网易云项目实战(一)
微信小程序之网易云项目实战(一) 1.全局app.json 配置 {"pages": ["pages/index/index","pages/logs ...
HarmonyOS(鸿蒙)App项目实战（1）运动手表篇学习笔记
HarmonyOS(鸿蒙)APP项目实战(1)运动手表篇学习笔记前言概括创建项目创建主页面创建index中的组件设定index中组件的样式为主页面添加应有的功能创建倒计时页面创建da ...
App项目实战之路(二):API篇
原创文章,转载请注明:转载自Keegan小钢并标明原文链接:http://keeganlee.me/post/practice/20160812 微信订阅号:keeganlee_me 写于2016- ...
App项目实战之路(四):UI篇
原创文章,转载请注明:转载自Keegan小钢并标明原文链接:http://keeganlee.me/post/practice/20160903 微信订阅号:keeganlee_me 写于2016- ...
2022你不容错过的软件测试项目实战（APP项目实战）免费版
前言最近很多的人都在问我有没有什么项目可以用来练手,正好我这里有一个比较适合练手的项目,那就给大家安利一下吧,废话就不多说了. 项目名称: APP项目实战项目说明: 本项目里面包括了功能测试.性能 ...
Web项目实战分享——小米官网
Web项目实战分享--小米官网大约每个学习过前端的学习者来说,都接触过web项目的实战,业内最真实的的,应该是自己独立编写一个网页项目,当然如果你是大佬的话,这只是小菜一碟,而如果你是小白或正在学习 ...

Vue2.5开发去哪网App项目实战记录（根据慕课网课程编写）

Vue2.5开发去哪网App项目实战记录（根据慕课网课程编写）相关推荐

最新文章

热门文章