Vue2.6实现去哪儿网 --安装依赖

一.依赖目录

• stylus

• fastclick

• vue-awesome-swiper

• axios

• better-scroll

二.vs code插件

• vetur

三.实操

stylus

    安装stylus是为了写css样式的时候可以有更好的排版，更直观地表现代码的结构，使用命令行工具进入到项目的目录。

npm install stylus --save

npm install stylus-loader --save

使用方法，例：下面的例子中，header是header_title的父级元素

<style lang="stylus" scoped>
  .header
    margin:0 auto
    .header_title
        text-align: center
</style>

-----------------------------------------------------------------------------------------------

fastclick

    fastclick 能帮助我们解决移动端300毫秒的点击延迟，使用命令行工具进入到项目的目录。

npm install fastclick --save

使用方法：在 main.js 中，       

import fastclick from 'fastclick'
fastclick.attach(document.body)             

注：有时这个解决方案在不同的浏览器上有兼容性的问题，在一些高级浏览器上，可以使用这样的方法来替代fastclick解决300毫秒点击延迟的方案

1.在reset.css里新增一个属性即可       

hrml {
    touch-action: manipulation
}            

-----------------------------------------------------------------------------------------------

vue-awesome-swiper

1.npm install vue-awesome-swiper@2.6.7 --save

2.在main.js入口文件中import

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

3.通过vue.use使用这个插件         

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

-----------------------------------------------------------------------------------------------

axios

1.npm install axios --save

2.在Home.vue里

//Home.vue
import axios from 'axios'

3.在methods里定义两个方法，通过axios.get方法获取json数据，并根据getHomeInfoSucc方法将我们获取的数据进行处理

getHomeInfo () {
  axios.get('/static/mock/index.json')
    .then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
  console.log(res)
}

//在vue3.x中，我们可以通过await把两步放在一起写
async function getHomeInfo() {
  let res = await axios.get('/api/index.json?city=' + city)
  res = res.data
  // 判断后端是否正确地返回了结果，并且res里有data这个内容项
  if (res.ret && res.data) {
    const result = res.data
    data.swiperList = result.swiperList
    data.iconList = result.iconList
    data.recommendList = result.recommendList
    data.weekendList = result.weekendList
  }
}

axios展开的篇幅有点长，会重新开贴。

-----------------------------------------------------------------------------------------------

better-scroll

1.在项目根目录下npm install better-scroll --save

2.在项目中的script标签下import

import Bscroll from 'better-scroll'

3.在项目中想要使用better-scroll，就必须满足better-scroll的使用格式，即

<div id="a" ref="wrapper">
    <div>
        <div class="area">......</div>
        <div class="area">......</div>
        <div class="area">......</div>
        <div class="area">......</div>
    </div>
</div>

我们在最外层div使用ref获取DOM节点，然后在生命周期函数mounted()中通过声明一个scroll实例属性创建一个新的better-scroll实例，同时通过$refs.wrapper接收一个DOM节点

mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
}    

这样我们就能在id为a的区域实现一个更好的页面滚动效果了

注：在我们使用better-scroll时，有时会出现移动端页面的@click事件被阻止的情况，这时我们应该手动将@click事件激活

this.scroll = new Bscroll(this.$refs.wrapper, {click: true})

-----------------------------------------------------------------------------------------------

vetur

    vetur 是一个 vue 的语法提示工具插件，在 vs code 的 extension（拓展）中搜索 vetur 然后安装上即可。

-----------------------------------------------------------------------------------------------