实现去哪儿网webapp项目记录

1.多页应用：

页面跳转的时候服务器都会返回HTML文件，只经历一个http请求

优点：首屏时间快，SEO效果好

缺点：页面切换慢

2.单页应用：

页面跳转通过js渲染，不会刷新（不经过http请求）

优点：页面切换快

缺点：首屏时间慢，seo差

3.reset.css解决不同手机样式显示不一样问题

4.border.css解决移动端像素问题

5.npm install fastclick -s 解决移动端click事件300ms延迟：

在main.js中import fastclick from 'fastclick'

fastclick.attach(document.body)

6.iconfont图标库，把需要的图标添加到购物车，之后添加到iconfont里的项目中，通过压缩包下载到本地项目。压缩包里包含很多文件，只需要后缀名为eog,svg,ttf,woff,css这几个文件

通过复制图标代码的方式将图标放到页面上，注意类名改成iconfont，在iconfont.css修改路径

如果添加了新的图标，需要重新替换这五个文件？

7.修改了webpack配置项一定要重启服务器 不然vue会报错

8.build的webpack.base.config.js文件的alias可以为指定目录自己定义名字，如@代表src

9.在码云创建新分支

本地命令行：git pull 拉取新分支到本地

git checkout 新分支名 切换到新分支

git status  能查看分支状态

注意：开发的时候不要在主分支开发！！！！

git pull <远程库名> <远程分支名>:<本地分支名> 表示从远程库中获取某个分支的更新，再与本地指定的分支进行自动merge。

在自己的分支写好后合并到主分支:

先git add .

git commit -m '解释内容'

git push  这一步是把自己本地的分支提交到线上自己的分支但没合并到主分支

git checkout master  切换到主分支

git fetch --all 先拉取到本地

git merge origin/自己分支名  get merge表示合并指定分支（自己的）到当前分支（master）

git push 将主分支推到线上

10.使用轮播图也有第三方库：vue-awesome-swiper 去github里找

11.scoped表示样式模块化，在里面定义的样式只对当前组件有效。如果当前组件运用到了全局的样式，需要用>>>来表示样式穿透？？？

12.设置元素的宽高比：将元素高度设为0，通过padding-bottom的百分比（针对父元素的宽度）设置高度，比如每个元素的 width 是 25%，现在想让元素的高度始终保持为其宽度的两倍，则 padding-bottom 的值应该设置为 50%。

13.pages=[[],[],[]],利用二维数组，根据数据自动地构建轮播图页码，可以实现多页切换轮播图的效果

14.

text-overflow:ellipse

overflow:hidden

white-space:nowrap

这三行样式实现溢出文本显示省略号效果，如果出现不了省略号可以考虑加个min-width:0

15.在.gitignore定义的文件不会被提交到本地和线上的仓库

16.使用proxy封装请求api，请求到本地static目录下的mock文件夹：在config的index.js中，找到proxyTable这个配置项

（请求后端服务器接口也在这里改）

proxyTable: {

'/api':{

  target:'http://localhost:8080',

  pathRewrite:{

  '^/api':'/static/mock'

    }

  }

  }

17.第三方库better-scroll:github有

用法：

npm i better-scroll -s

import Bscroll from 'better-scroll'

调用mounted声明周期函数，页面加载完成之后可以使页面手动滑动

mounted(){

      this.scroll = new Bscroll(this.$refs.wrapper) //要取到最外层（包裹层）的dom元素

    }

18.函数节流：

由于滚动事件非常频繁，稍微滚动一下就会触发许多次，如果频繁触发的滚动，每一次都去检查是否到页面底部了再次造成了浪费。

于是设置一个开关，一次只能有一个触发执行，并对执行设置计时一段时间再执行，执行完毕之后再解锁。这就是函数节流。(设置timer，clearTimeout(timer),setTimeout(()=>{要计算的东西},间隔时间)

19.对于不同组件之间的通信，如果是兄弟组件，有共同的父组件，可以通过传给父组件再传给子组件的方式通信。但如果是没有共同父组件的组件之间的通信，就需要用到vuex。总线模式也可以但比较麻烦

20.vue全局事件的解绑：在某个组件使用了window.addEventListener,所有组件都会监听到，这就需要在这个组件解绑全局事件：window.removeEventListener（在生命周期钩子中，如deactivated）

21.组件name的用法：

1.递归组件时自己组件的名字用的就是name

2.页面取消缓存如keep-alive include/exclude=“name”

3.vue devtools中的组件名字也是name

22.动画过渡失效？在detail-animation分支

23.更改webpack，使本地ip地址能访问网站：在package.json中dev增加一句：--host 0.0.0.0

手机和电脑在同一个局域网手机就可以访问（真机调试）

24.解决手机兼容性问题：

安装第三方包：npm i babel-polyfill -s

在main.js引入 import 'babel-polyfill'

25.项目打包上线：

npm run build

生成的dist文件夹就是要上线的内容，给后端放到服务器上（后端的根目录）

如果要修改后端运行的目录，要找到config文件夹下的index.js文件，找到build，修改assetsPublicPath即可（默认是后端根路径）

修改过的文件记得重新打包