我的代码地址：https://gitee.com/Zl190/Travel
效果图：
具体的话你们可以下载我的项目参考一下,有一些特效也可以自己改进。
接下来我要开始总结我所做的去哪儿app的一些心得了。
1.移动端开发中的1px边框问题，由于在不同屏幕上，可能会使得1px实际在移动端显示不是1px,怎么解决?
解决：通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
2.移动端click事件延迟300ms的解决方法？
先在终端下载fastclick
cnpm install fastclick --save
然后在main.js里面引入
import fastClick from 'fastclick'
使用fastClick
fastClick.attach(document.body)
3. scoped限制该vue文件下的css仅在该.vue文件下使用。
4. stylus样式的应用：
下载stylus
cnpm install stylus --save
cnpm install stylus-loader --save
使用
<style lang="stylus" scoped> </style>
stylus使用变量的话可以在src下面的assets新建个文件夹css，然后建个 varibles.styl来存放要使用的一些变量.
最后在<style lang="stylus" scoped/>标签内引入
@import '../../../assets/css/varibles.styl'
这样就可以使用那些变量了。
5.简化路径
@在路径中指的是src目录，即@/assets/css/reset.css,注意，在css样式中引入其他css目录时，需要写成~@/assets/css/reset.css。
简化路径，为常用路径简化别名，如src/common可简化为common/：
步骤：在build下webpack.base.conf.js文件下
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'), //@这是src目录的别名
'common':resolve('src/common') //这是src/common的别名，从而用common替代src/common路径达到简化效果
}
}
6. iconfont字体图标的应用：
6.1 在iconfont注册账号，建立一个项目，然后将需要的图标加入到该项目下，下载到本地电脑该项目文件夹下src->assets->iconfont中。
6.2 在iconfont.css的url中修改字体在本地的路径，在main.js中直接引入该文件import ".import './assets/css/iconfont.css'"。
6.3 <span class="iconfont"></span>即可显示该图标字体。
7.解决网速过慢获取资源页面抖动问题
设置元素的宽高比例固定就行了
.swiper
overflow : hidden
width :100%
height :0
padding-bottom :31.25%//即高始终为宽的31.25%
8.scoped穿透
如果我们给样式设置了scoped，这个时候组件里面的样式既不能影响外部样式，也不能比外部样式所影响。
.swiper >>> .swiper-pagination-bullet-active
background-color :#fff
9.vue-awersome-swipper数据加载后直接显示最后一页问题。
解决:使用axios获取数据传递给轮播组件以后直接显示了最后一页，此时可以使用v-if通过判断数组长度返回的是true还是false
<swiper :options="swiperOption" v-if="showimg">
showimg(){
return this.swiperList.length
}
这样这个问题就解决了。
10.vue-awesome-swiper轮播插件的应用：
1.在main.js中引入全局插件：
npm install vue-awesome-swiper@2.6.7 --save
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css"
Vue.use(VueAwesomeSwiper)
2.
<swiper :options="swiperOption" v-if="showimg">
<!-- slides -->
<swiper-slide v-for="list of swiperList" :key="list.id">
<img class="swiper-img" :src="list.imgUrl"/>
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
swipperDOM结构变化导致的滚动问题
如果我们插入swipper中的DOM有所变化，那么滚动效果就会变得非常的差，这个时候我们可以设置他的swipperOptions里面的observeParents以及observer
data () {
return {
swiperOption: {
pagination : '.swiper-pagination',
paginationType : 'fraction',
observer:true,
observeParents:true,
}
}
}
11.跨平台的axios的使用：实现跨平台的请求
10.1 npm install axios --save //或者<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
10.2 import axios from "axios"
10.3 methods:{ //通过.json文件模拟后端接受的数据，将index.json文件放在static里面
getHomeInfo(){
axios.get("./static/mock/index.json").then(this.getHomeInfoSucc)
},
getHomeInfoSucc(res){
console.log(res)
}
}
12.在config>index.js里面 做如下设置，则可以实现通过调用api/index.json接口时，自动转到本地static/mock/index.json文件
proxyTable: {
"/api":{
target:"http://location:8098",
pathRewrite:{
"^/api":"/static/mock"
}
}
}
13. Bscroll使用方法：
1. npm下载better-scroll：npm install better-scroll --save;
2. 引入better-scroll：import Bscroll from "better-scroll";
3. 定义标签dom: < div ref="wrapper"></div>
4. 实例化bscroll: this.scroll = new BScroll(this.$refs.wrapper, {click: true});
注意：Bscroll提供滚动到指定DOM位置的API，this.scroll.scrollToElement(dom);
全局事件
如果把事件绑定到window上面比如scroll事件，那么在推出这个页面的时候一定要进行解绑，不然在其他的页面也会受到这个事件的影响，造成bug
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy () {
window.removeEventListener('scroll', this.handleScroll)
}
14.滚动行为
如果我们的某个页面是滚动的，切设置了keep-alive，那么我们进入其他页面返回的时候如果读取了缓存，那么这个缓存是包括滚动行为的，则原来页面滚动到什么位置现在也滚动到什么位置如果我们不希望出现这种情况，可以在路由中设置滚动行为
scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }
15、组件name的作用
1、在递归组件中实用，即，我们在创建组件的时候就可以使用组件自身
2、keep-alive的exclude中实用，用来避免某些组件进入缓存
3、vue-devtools中的使用
16.keep-alive
使用keep-alive可以进行缓存，这样就不会每次进入相同的页面都会进行数据请求了，能提高用户体验、在使用keep-alive以后会多两个生命周期函数:activated以及deactivated，我们可以在这里进行一些判断操作，来决定是否需要缓存，是否需要执行数据获取。此外，如果我们是给整个路由router-view组件进行了keep-alive，并且在这里执行了一些exinclude设置
<keep-alive exclude="Detail">
<router-view/>
</keep-alive>
<keep-alive exclude="组件name名"> //exclude="组件name名"表示该组件不需要缓存，即每次跳转到页面都重新加载mounted生命周期
activated(){ //因为keep-alive而多出来的生命周期，即页面初始加载时和mounted一样执行，且在每次页面跳转返回当前页面时，仍然会执行，但是mounted因为在keep-alive下不会执行了
if(this.lastCity !== this.city){ //即跳转回当前页面时，如果选择的城市发生改变，则再次发生ajax，否则就不发生ajax
this.lastCity=this.city;
this.getHomeInfo();
}
}
那么对应的里面就没有这两个生命周期函数了，我们不能使用这两个函数
17
<router-link
class="item-list border-bottom"
v-for="item of recommendList"
:key="item.id"
tag="li"
:to="'/details/'+item.id"></router-link>
这种写法，避免了a标签改变了li表示内里的文字颜色，相当于<li></li>且自带跳转页面的功能。
<router-link tag="div" :to="."></router-link> 其中to="."表示返回上一页
18.路由带参数传值：
{
path: '/detail/:id',//动态id
component: Detail
}
19.vue中的递归组件：即组件里面调用组件自己本身；
通过name：" detailComponent"名，去调用<detail-component :list="参数"></detail-component>
image.png
20.localStorage本地存储:
let defaultCity = '上饶'
try {
// 如果存在本地的城市，则让默认的城市等于本地选择的城市
if (localStorage.city) {
defaultCity = localStorage.city
}
} catch (e) {
}
export default {
city: defaultCity
}
21.
vuex的使用：如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，
您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，
Vuex 将会成为自然而然的选择；
步骤：21.1 安装vuex:npm install vuex --save ；
21.2 src文件夹下创建一个store文件夹用于处理vuex；
21.3 在store文件夹下创建index.js；
21.4 在index.js里写：
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex); //vue里面使用插件（如vuex）都是通过Vue.use(插件名)
export default new Vuex.Store({ //创建new Vuex.Store仓库，并导出export
state:{ //存放全局公用的数据
city:"上饶", //首页头部显示的城市，默认为重庆
},
actions:{ //接受模块通过this.$store.dispatch传递过来的changeCity=item的数据，ctx.commit表示把该数据名和值传递给mutations
changeCity (txt, value) {
// 通过txt的commit方法触发mutations里的changeCity，并且传递city。
txt.commit('changeCity', value)
}
}
//注释：如果是this.$store.commit传递过的数据，可以直接不需要actions，从而直接通过mutations处理修改state的值
mutations:{ //接受actions通过ctx.commit传递的数据并处理，即修改state里面的city让其等于item
changeCity(state,item){
state.city=item;
}
}
})
22.动画的添加
npm install animate.css --save
下面是我写的动画
然后使用该动画
23. vue项目的接口联调:即将模拟的json数据改成从服务器获取数据：
在config->index.js下：
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
"/api":{
target:"http://localhost:80", // 将此改为服务地址，即发送/api的ajax会从该地址获取数据
}
},
24.vue项目打包上线：进入该项目的命令行，输入npm run build，会生成dist文件，然后将该文件里内容放在服务上，如放在xampp->htdocs根目录文件夹下
补充一下：
还有函数节流
在我们使用一些滚动事件的时候，我们可以设置节流来提高效率，比如滚动事件如果在一定时间内连续滚动则不进行处理，直到最后确定滚动出来了，这样能提高性能。常见解决方式是设置一个定时器来进行解决
// 设置个定时器性能更好
this.timer = setTimeout(() => {
var result = [];
// 遍历citier这个数组对象 i :0,1,2,3,...
for (var i in this.cities) {
// 循环这个数组上的所有元素
this.cities[i].forEach(value => {
// 如果当前对象的spell和name包含keywords关键字则向新创建的result数组中添加该对象
if (
value.spell.indexOf(this.keywords) > -1 ||
value.name.indexOf(this.keywords) > -1
) {
result.push(value);
}
});
}
this.list = result;
}, 100);
这是我写完去哪儿app的心得。
想学习前端的同学，我留下[传送门](https://www.liaoxuefeng.com
)，码子不易，如果文章对你有帮忙，点个赞呗
