vue项目实战（一）- 旅游网站首页开发

初始化项目:

npm init webpack mytravel
//接下来根据提示内容选择就行了

一、网站首页Header开发

安装依赖：

npm install stylus --save
npm install stylus-loader --save

1rem = html font-size = 50px

首页header样式：

二、iconfont的使用

iconfont官网：https://www.iconfont.cn

header部分代码实现：

效果图：

image.png

修改完webpack.base.conf.js的内容后，需要重新启动环境。

三、首页轮播图

安装vue-awesome-swiper插件：

地址：https://github.com/surmon-china/vue-awesome-swiper

可以快速构建轮播图

使用问题：

我安装的是最新版本，但是轮播图的小圆圈一直不显示，解决办法：

在2.6.7版本：

swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },

新的版本：

swiperOption: {
        pagination: {
                    el: '.swiper-pagination'
            },
        loop: true
      },

四、首页桌面图标

五、图标区域逻辑实现

六、首页推荐组件开发

七、周末游组件

八、使用Ajax获取首页数据

安装axios插件：

npm install axios --save

引入：

import axios from 'axios'

在Home.vue中写入：

methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
    }
  },
  mounted () {
    this.getHomeInfo()
  }