去旅行App 练习记录 _记录

时人不识凌云木，直待凌云始道高。这篇文章主要讲述去旅行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 [email protected] --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 获取首页数据
推荐 vue-axios
整个首页发送一个Ajax 请求

引入：import axios from ‘axios‘
methods: { getHomeInfo: function() { axios.get(‘/api/index.json‘) .then(this.getHomeInfoSucc) }, getHomeInfoSucc: function() { console.log(res) } }, mounted () { this.getHomeInfo() }
整个项目中只有static 目录下的内容可以被外部访问到
进入 config/index.js 添加 proxyTable 进行api替换，可以做到线上本地api 自动切换
proxyTable: { ‘/api‘: { target: ‘http://localhost:8080‘, pathRewrite: { ‘^/api‘:‘/static/mock‘ } }

七、城市选择页面路由配置
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下面添加