去哪网App 练习总结

一、首页Header的开发

1.stylus使用

设计图 750 px ，是iphone6 的2倍图设计稿
使用 stylus 方便我们快速的编写 CSS 代码，stylus 是一种CSS预处理语言
npm install stylus --save
npm install stylus-loader --save （stylus-loader 可以将 stylus 语言转换成原生 css）
新建Header.vue 设置
```
export default {name: 'Home')
```
在Home.vue中引入

import HomeHeader from './components/Header'

并且声明该局部组件

```
component: {HomeHeader}
```
关于样式：使用stylus语言，只对当前组件有效
```
<style lang="stylus" scpoed>
```
iconfont 引入图标
通过webpack对文件路径进行简化，进入build=>webpack.base.conf.js，缩写路径： reslove.alias 内添加 'styles': resolve('src/assets/styles'),

遇到的问题：

下次运行项目会遇到 stylus报错的问题。

原因，package.json 缺失依赖，不能解析stylus

解决方法：执行 npm install stylus-loader css-loader style-loader --save

二、首页轮播图

1.创建分支，在分支开发完毕会合并到master主分支上

git pull (把线上分支拉到本地)
git checkout index-swiper (修改本地的分支为新建的那个分支)
git status (查看本地的分支)

2.轮播图插件插件 vue-awesome-swiper

npm install vue-awesome-swiper --save (默认最新版)

npm install vue-awesome-swiper@2.6.7 --save (安装稳定的版本)

在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 } */)

三、图标区域页面布局

　　写样式，此阶段没什么难点

四、图标区域逻辑实现

1. 图标分类轮播效果

打开 swiper.vue
给要滚动的组件包裹 <swiper :options="swiperOption"> 与 <swiper-slide> 标签，一个<swiper-slide>为一页
实现上下区域都能滑动，需要将.swiper-container 的宽高设定为和 .icons一样，使用样式穿透符 "<<<" ，可以修改不属于本页组件的样式
关闭自动滚动参数：swiperOption: {autoplay: false},

2.合并线上分支

//同步线上仓库分支
git add .
git commit -m 'add icons'
git push

//切换到master分支
git checkout master
//合并
git merge origin/index-icons
git push

五、推荐区域

写样式，此阶段没什么难点

六、Ajax 获取首页数据

七、城市选择页面路由配置

better-scroll 使用

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling -->
</div>

//初始化
mounted () {
      this.scroll = new Bscroll(this.$refs.warpper)
}

遇到的问题，加载后无法滚动，刷新后可滚动

情况一：

原因：当数据是动态渲染时，在没有渲染出来的情况会视为scollBox的高度为0，因此要在渲染完成后执行 better-scroll的refresh 操作。因为此时高度因为新数据发生改变，需要重置 better-scroll

//mounted函数  
  this.$nextTick(()=>{
                  if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.rongqi, {
                      click: true
                    });
                  } else {
                    this.scroll.refresh();
                  };
            });

情况二：

以PC模式打开页面，按F12后切换移动端无法滚动。

解决方法：切换移动端后，按F5 以移动端模式重新加载即可。

八、兄弟组件间联动

子传父，父传弟的形式

九、使用Vuex实现数据共享

遇到的问题：模块莫名其妙的丢失

目前解决办法是手动删除 node_modules文件夹，之后进行 npm install 重新安装

VUEX的使用

十、城市保存

localStorge本地存储

state: {city: localStorage.city || '上海'},
mutations: {
    localStorage.city = city
}

使用keep-alive 优化网页性能

遇到的问题：

每次切换路由时，Ajax 都会发送请求

解决方法：在App.vue 文件的 <router-view>标签外包裹一层 <keep-alive> ，下次请求时会将已存储的内容从内存中取出即可，实质是不再执行mounted 周期函数

十一、详情页动态路由及 banner 布局

十二、公共图片画廊组件拆分

遇到的问题，

页面拖动会互相影响解决滚动行为

https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

在router/index.js 文件中 routes下面添加

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

作用：每一次做页面切换时，让先进入的页面X轴为0 Y轴也为0，（始终回到最顶部）

十三、真机测试

通过 ipconfig 命令获取本地IP （我的是 192.168.1.105:8080）
进入 package.json 在 "dev" 内添加 "--host 0.0.0.0" 即可使用手机在内网访问

解决手机低版本浏览器白屏不支持 promise 的问题

npm install babel-polyfill --save
在 main.js 中引入 "import 'babel-polyfill"

十四、打包上线

前后端联调：

修改 config/index.js 下的 proxyTable

proxyTable: {
      '/api': {
        target: 'http://localhost:8080', //前端模拟数据形式
        pathRewrite: {
          '^/api':'/static/mock'
        }
      }
    },

修改为：

proxyTable: {
      '/api': {
        target: 'http://localhost:80' //后端从80端口返回数据
      }
    },

遇到的问题：

Vue 打包后运行 index.html 网页一片空白

解决方法：修改 config 文件夹下的index.js