vue学习之路——vue2.5开发去哪网项目

写项目之前我做了哪些准备？

1. 看官方文档，对vue实例、生命周期、组件基础、计算属性、侦听器、样式绑定、条件渲染、列表渲染有了一定了解；
2. 对组件进行深入的学习，了解父子组件间的数据传递、组件参数校验、非父子组件间传值、在vue中使用插槽；
3. 对vue中的动画和过渡有一定的了解，因为项目中需要用到；
4. 对vue-router、vuex有一个基本的了解；
5. 了解vue-cli脚手架工具的使用。

项目完成后是什么样子的？

首页

城市列表和搜索页

 

 

详情页

 

项目演示地址：http://guozhaoxi.top/travel/

项目中用到了哪些工具（库）

• 脚手架工具——vue-cli
• reset.css初始化样式
• 项目中用到的icon来自阿里图标库
• 轮播图插件-vue-awesome-swiper库
• 获取接口数据——axios库
• 移动端滚动插件-——better-scroll
• 解决移动端延迟300毫秒后才响应点击事件的问题——fastclick

项目中遇到的问题以及如何解决的？

1.在写项目的时候我发现平时在pc端常用的1px边框在移动端却变成了2px，如何解这个问题呢？

解决方案：通过查阅网上相关问题得知border.css可以解决这个问题，于是在main.js中引入border.css解决了这个问题。

2.城市列表页右侧字母表的布局以及如何实现和城市列表组件的联动（非父子组件间传值）如图所示：

解决方案：字母表的布局采用flex布局。如何实现字母表组件和列表组件的联动我使用的解决方案是通过他们的父组件来进行传值，当字母表触发点击事件或者手指滑动事件的时候，利用事件对象获取到用户点击的是哪个字母随后通过$emit将其传递给父组件，再由父组件传给列表组件。（见下方代码）

 // Alphabet.vue (字母表组件)
handleLetterClick(e) {
    this.$emit('change', e.target.innerText)
}

// City.vue (父组件)
// 字母表组件
<city-alphabet @change="handleLetterChange"></city-alphabet>
// 通过属性传值的方式将letter传递给子组件
<city-list :letter="letter"></city-list>

handleLetterChange(letter) {
    this.letter = letter
}


// list.vue (城市列表组件)
watch: {
    letter() {
        if (this.letter) {
            const element = this.$refs[this.letter][0]
            this.scroll.scrollToElement(element)
        }
    }
}

3.首页右上角的城市和城市列表页的当前城市是同一个数据，如何共享数据？

解决方案：选用专为vue.js应用程序开发的状态管理模式vuex来解这个问题，使用vuex可以使两个页面共享同一个状态，因为需要根据用户的选择来改变当前城市，所以通过vuex提供的辅助函数mapState放到组件的computed计算属性中。

4.选中城市以后跳转到首页，刷新页面以后无法保存选择的城市，如图所示：

解决方案：使用localStorage进行缓存，从localStorage中获取当前城市，解决后的效果如图所示：

5.项目的详情页中用到了递归组件，那么什么是递归组件？递归组件的使用应该注意什么？

组件是可以调用自身的，这个时候就是递归组件。递归组件的使用需要注意的是递归组件是通过name选项来调用的，所以必须声明一个name选项，还有就是要注意给递归组件加一个条件限制，不然很容易导致无限循环。

写完项目以后我从中学到了什么？

1. vue-cli脚手架的使用，文件扩展名为.vue的单文件组件的使用；
2. vue模板语法、兄弟组件间的传值，非兄弟组件间的传值，组件参数的校验；
3. 动画和过渡效果的使用
4. vue中计算属性和侦听器的区别及如何使用
5. vue-router的使用，基础路由、动态路由参数如何传递以及编程式导航的使用
6. vuex的概念、vuex中的state,mutation,action是如何工作的
7. localStorage的使用
8. swiper在vue中的使用，fastclick、border.css，better-scroll的使用
9. axios获取接口数据的使用
10. vue项目如何打包上线