Vue实战项目开发--首页开发

首页开发

注意：项目的图片资源都是去哪儿网站的在线图片(图片来源网站),只可以用来练习哦，小心侵权

1. 首页header区域开发

       

   在home目录下新建一个components文件夹，然后把首页home拆分成不同的组件放在components文件夹下，最后通过在home.vue中引用对应的组件就可以了

 主要编写的代码有Home.vue和Header.vue

 home.vue: 

    Header.vue

   Header.vue的样式使用stylus预处理框架来写的css样式，需要安装依赖

npm install stylus stylus-loader --save

iconfont的使用和代码的优化

   在iconfont网站注册登录后，并创建自己的项目的图标库后，把你需要的图标加入到这个项目中

下载到本地后，在项目的assets/styles中新建一个iconfont文件夹，然后把刚才下载的文件解压，把里面这几个文件  iconfont.eot、iconfont.svg、iconfont.ttf和iconfont.woff放到新建的iconfont文件夹中，把iconfont.css放到assets/styles路径下，并修改iconfont.css的对前面四个文件的引用（因为前面四个文件的路径变化了）：

@font-face {font-family: "iconfont";
  src: url('./iconfont/iconfont.eot?t=1540351455180'); /* IE9*/
  src: url('./iconfont/iconfont.eot?t=1540351455180#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAS4AAsAAAAABywAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8mkksY21hcAAAAYAAAABgAAABnLTOHs9nbHlmAAAB4AAAANIAAADsyjr7HGhlYWQAAAK0AAAALwAAADYTC1G+aGhlYQAAAuQAAAAcAAAAJAfeA4VobXR4AAADAAAAAA4AAAAQEAAAAGxvY2EAAAMQAAAACgAAAAoAngBobWF4cAAAAxwAAAAfAAAAIAERADBuYW1lAAADPAAAAUUAAAJtPlT+fXBvc3QAAASEAAAAMgAAAEOSzck0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeqTw3Z27438AQw9zM0AAUZgTJAQDkYwxCeJztkMENgEAIBAdRczGW4dOXMV4/vqz8rgwFzodFuGQIbAiPBQZAjdXoQS4E12muhK9M4fcctierDspStprv+zuFJC5STJ1/lpFfc/T93dRTa3jGZWt4rjU30AfLSRNieJxjYGRg+N/A9IO5mUGIgYGTkU1EnFHMyMxEnVHNxJzRTI+R6dg/F3EJxn0cYgIc/5w42Bn3cnPIM5f/s5F0kPznziEoysG4k0OMk/Ewtzw7AxAwA83bz1zK7MDAzSDOoMzAoKrHqG7HaC7HKM4HZgC5fIzscoysanaMYvKMYnyMauqMt9a+YGF5sXYdiFw38SALy8GJE0AkYy8Xs6gshyOY5AHKwdQ5wFRMmHjQiltGgJHLH0wyMIIcwcLA1MDABLSbUZEJSP9haAByGADaMDL4AAB4nGNgZGBgAOLOzkOi8fw2Xxm4WRhA4Po3tvsI+n8DCwNzM5DLwcAEEgUAO60LEQB4nGNgZGBgbvjfwBDDwgACQJKRARWwAABHCgJteJxjYWBgYEHCAACwABEAAAAAAAAAKABoAHYAAHicY2BkYGBgYVBhYGYAASYg5gJCBob/YD4DAAx/AUIAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAhZGJkZmRhZGVgS0tMS+jNJOtOL+0uDSfPSszMa8kv5SBAQBvVQhZAAA=') format('woff'),
  url('./iconfont/iconfont.ttf?t=1540351455180') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('./iconfont/iconfont.svg?t=1540351455180#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

注意：这里有三种使用图标的样式，你可以看下载的文件里三种不同的引入方式，点击打开就可以查看了（特别重要）

 不同的引用方式，复制不同的代码

然后在main.js中引入就可以使用了

import './assets/styles/iconfont.css'

使用：

 

代码优化：在build的webpack.base.conf.js中这样增加这段代码

   

然后在main.js和Header.vue中就可以修改引入方式（注意：）

main.js：

import 'styles/reset.css'
import 'styles/border.css'
import 'styles/iconfont.css'

 Header.vue：这里是styuls的css预处理设置的css

 @import '~styles/varibles.styl'

   varibles.styl：

$bgColor = #00bcd4

   然后就可以在Header.vue中使用：

@import '~styles/varibles.styl'
  .header
    display flex
    line-height .86rem
    background $bgColor
    color #fff

首页轮播图

因为新加一个功能，然后就可以在GitHub上创建一个index-swiper分支，可以参考这个博客（GitHub--创建新的分支(转)）

使用轮播图需要安装一个插件（插件地址：vue-awesome-awiper）：

npm install [email protected] --save

然后就是引入这个这个插件，分别可以全局引入和局部引入（具体的操作就看上面的插件地址中有说明）

全局引入：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

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

局部引入：

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

Swiper.vue：

Home.vue(改变):

如果你是分支上进行这部分的代码的开发，则需要执行以下操作：

git add .
git commit -m '这里写这次提交的说明' 
git push <- 上传index-swiper分支上->
 
git checkout master <- 切换回主分支->
git merge index-swiper <- 将index-swiper分支合并到主分支上->

图标区域页面布局

这里我们新建了一个分支index-icons，用于icons图标区域的功能实现，这里主要看代码就可以了

Home.vue:

图标区域逻辑实现

Icons.vue：

注意：这里css样式设置布局和计算属性来把原来的数组处理成了一个二维数组

mixins.styl（用stylus把常用的样式封装起来）：

ellipsis() 
  overflow hidden
  white-space nowrap
  text-overflow ellipsis

*Icons.vue的css样式部分（注意这里是在Icons.vue里面的，使用stylus来写的css样式）：

*计算属性（注意这里是Icons.vue中的计算属性，把iconList处理成的一个二维数组，再使用两层v-for来循环出所有的图标，让超过8个的图标数组可以显示在第二页，滑动可以看到）：

computed: {
    pages () {
      const pages = []
      this.iconList.forEach((item,index) => {
        const page = Math.floor(index / 8)
        if(!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }

第一页：

第二页：

推荐组建开发

Recommend.vue

Home.vue:

效果图：

周末去哪儿-模块

直接把Recommend.vue的内容复制到Weekend.vue中，然后把name修改了，在把样式修改了，就可以了

Weekend.vue:

Home.vue

显示效果：

Ajax获取首页数据

这里使用vue推荐的axios来实现Ajax的请求

因为不是每一个人都有服务器来实现请求，所以这里我们使用模拟的数据来实现请求

• 首先安装axios来实现Ajax请求数据

  npm install axios --save

  在Home.vue中引入：

  import axios from 'axios'

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

  上面就是在Home.vue中的axios的使用

• 在static文件夹下新建一个mock文件夹，新建一个index.json文件，用来模拟数据

       

       index.json:

{
  "ret": true,
  "data": {
    "city": "成都",
    "swiperList": [
      {
          "id": "0001",
          "imgUrl": "http://img1.qunarzz.com/piao/fusion/1810/e0/c99056cd01148902.jpg_750x200_8b93d0b5.jpg"
      },
      {
          "id": "0002",
          "imgUrl": "http://img1.qunarzz.com/piao/fusion/1808/7e/19b06067afac3402.jpg_750x200_f613313a.jpg"
      },
      {
          "id": "0003",
          "imgUrl": "http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg"
      }
    ],
    "iconList": [
      {
        "id": "0001",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        "desc": "景点门票"
      },
      {
        "id": "0002",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
        "desc": "泡温泉"
      },
      {
        "id": "0003",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
        "desc": "成都必游"
      },
      {
        "id": "0004",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png",
        "desc": "川剧变脸"
      },
      {
        "id": "0005",
        "imgUrl": "https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
        "desc": "打卡圣地"
      },
      {
        "id": "0006",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/ea/01d081dacb03cc02.png",
        "desc": "赏秋色"
      },
      {
        "id": "0007",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
        "desc": "一日游"
      },
      {
        "id": "0008",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png",
        "desc": "成都熊猫基地"
      },
       {
        "id": "0009",
        "imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        "desc": "全部"
      }
    ],
    "recommendList": [
      {
        "id": "0001",
        "imgUrl": "http://img1.qunarzz.com/sight/p0/1612/1d/1d9a740c1f9e0efaa3.img.jpg_200x200_63285bd9.jpg",
        "title": "成都海昌极地海洋公园",
        "desc": "蠢萌企鹅陪你嗨翻这个秋"
      },
       {
         "id": "0002",
         "imgUrl": "http://img1.qunarzz.com/sight/p0/201407/03/a584374ee80b738e2600d6bcaf1299e3.jpg_200x200_c26fb243.jpg",
        "title": "都江堰",
        "desc": "气势磅礴的“世界水利文化鼻祖"
      },
       {
        "id": "0003",
        "imgUrl": "http://img1.qunarzz.com/sight/p0/201301/16/ae96ce4058bd5cf093835fbb.jpg_200x200_e4cb9743.jpg",
        "title": "青城道温泉",
        "desc": "吐纳青城气息，享受自然温暖"
      },
      {
        "id": "0004",
        "imgUrl": "http://img1.qunarzz.com/sight/p0/201307/23/b8db11dca4378903c8d65eac.jpg_200x200_56f59a84.jpg",
        "title": "成都动物园",
        "desc": "?好评如潮，小伙伴热推景点~"
      }
    ],
    "weekendList": [
      {
        "id": "0001",
        "imgUrl": "http://img1.qunarzz.com/sight/source/1509/ff/4184c6c13edbb.jpg_r_640x214_60474b61.jpg",
        "title": "成都周边秋色",
        "desc": "细数成都周边秋天最美仙境"
      },
        {
        "id": "0002",
        "imgUrl": "http://img1.qunarzz.com/sight/source/1505/a2/78e4dbcfd45a6d.jpg_r_640x214_7a62b06a.jpg",
        "title": "成都必游TOP10",
        "desc": "成都的标志，也是现代人对老成都的记忆"
      },
        {
        "id": "0003",
        "imgUrl": "http://img1.qunarzz.com/sight/source/1505/63/0ffcb5c329a19c.jpg_r_640x214_93fd1e5a.jpg",
        "title": "慢游成都最美古镇",
        "desc": "撷取一份悠闲，寻觅散落在时光里的幸福"
      },
      {
        "id": "0004",
        "imgUrl": "http://img1.qunarzz.com/sight/source/1505/b8/e6206794272459.jpg_r_640x214_a002ded9.jpg",
        "title": "郊野户外深呼吸",
        "desc": "做个久违的深呼吸，来一场清肺之旅"
      }
    ]
  }
}

• 修改webpack配置（修改config/index.js）：

       

proxyTable: {
      
},

   在dev下的proxyTable中新增下面的内容 

proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
},

   作用是使我们在开发环境访问API的index.json时自动去找模拟的数据（/static/mock/index.json），而在正式环境时就访问正式的接口，减少后期的更改请求接口的问题

首页父子组件数据传递

在Home.vue中获取全部的数据，然后在传递给子组件

• 首先，在Home.vue的data中定义需要传递的数据名称

        

•  然后把取到的值赋值给data中的定义好的属性

        

• 最后传递给子组件，子组件接受

        传递给子组件（通过属性的方式）：

         

         子组件接受：

          

          

          注意：这里list：Array和city：String是表示子组件接受父组件传递来的数据是什么类型的，如果父组件传递的不是这个类型的就会报错，

还有就是在swiper.vue中会出现轮播图显示的是最后一张图片，因为父组件传递了一个空数组造成，这里这样处理

          

          

然后这里实现的是当数组为空时，swiper不会进行循环，首页部分就完成了

最最最后就是把代码提交到GitHub上（我的这个练手项目在github上地址：项目地址，有需要的小伙伴可以拉取下来，运行下）