实战项目-慕课网Vue2.5去哪儿

 

实战项目-慕课网Vue2.5去哪儿（一）

背景：

之前写的博客，都是积累知识的，我认为不是很适合我自己，我习惯在项目中总结知识

学太多java了，明确的感觉到java是学不完的，但是没有做实际项目的动力我也不太想学习其他的java方面的知识，所以自学前端，基础知识都学完之后，用vue框架跟着慕课网上面的视频写了一个实战，这是实战的第一部分。

心得与总结

这里主要总结自己的写代码所碰到的问题，和解决方法，流程按照开发流程。代码github：https://github.com/XiongYuSong/Travel/下载ajax分支

1.路由配置：我先是通过配置路由（vue-router）跳转到home页面，学会了怎么去配置路由，去进行单页面（spa）开发，我想多页面也就是按照路由的不同进行不同的跳转，然后就是局部刷新，但是本页面没有涉及到，下一个页面肯定会设计，根据省份的不同显示不同的城市名称。

2.组件化开发：在这个项目中，将首页分为了五个模块每个模块都是一个.vue文件分别进行数据渲染和页面样式的设计，很直观的直接找到相应的组件去修改代码，并且可重用。

3.页面代码格式：在刚开始写项目中，最大的困扰就是页面中的代码的书写格式问题，只要出现代码格式不规范，就会进行报错。研究之后知道了项目中的（.editorconfig）文件就是代码后台进行检查的规范，进一步了解到（EditorConfig for VS Code）插件和（ESLint）插件的不同。（ESLint）插件并没有接管我项目中的（.editorconfig）配置，但是当我修改成（EditorConfig for VS Code）插件时页面就会按照我配置好的代码格式话方式进行格式化。在配置（stylus）CSS样式配置时，也需要下载应用一个插件（Manta's Stylus Supremacy）然后进行配置。

4.ajax后台获取数据：现在官方推荐使用（axios）进行ajax获取带数据，这个页面中，运用ajax在页面安装完毕之后（mounted函数中）进行后台数据获取，很可惜只有一个get请求案例，但是其他请求方式可以看别人的博客进行学习。

5.开发阶段的ajax请求的页面替换：代码中有这样的一个配置，路劲：config/index.js,修改其中的配置，可以让开发中的url路径进行替换。

6.static目录：这个目录是开发中除了路由配置页面之外可以访问的一个路径，将本应该从后台获取的数据放在通过json格式放在这里面进行测试，和上面的url替换功能结合，解除了前端开发需要从后台获取数据的麻烦事情，简化并且提升了前端开发的精准度，从后台的角度看，就是终于不用数据渲染页面了，都是前端的事.......

7.父子组件中数据传递：ajax获取数据之后，父组件将数据传递给子组件，在（Home.vue）页面中呈现，子组件通过特殊格式获取数据之后，计算属性进行各种转换，很方便，也有封装，不传递的数据绝对无法访问，可惜本页面没有子组件传递给父组件的内容，下一个页面肯定有.......继续学习吧

8.git上传项目配置文件以及各种git操作：（.gitignore）在这个文件中配置的目录将不会上传到github中，学习了很多的git操作

扫描二维码关注公众号，回复： 1279061 查看本文章

一、简单介绍

1）目录结构：

目录/文件 　　　　　　说明

• build                            ------------------------项目构建(webpack)相关代码

• config                          ------------------------配置目录，包括端口号等。我们初学可以使用默认的。

• node_modules npm    ------------------------加载的项目依赖模块

• src                               ------------------------这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件。

  • assets　　                         ------------------------一些图片，如logo等

  • pages:　　　　        ------------------------目录里面放了一个组件文件。

  • App.vue:  　　                   ------------------------项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。

  • main.js:   　　                    ------------------------项目的核心文件。

• static   　　                 ------------------------ 静态资源目录，如图片、字体等。

• .xxxx文件                    ------------------------这些是一些配置文件，包括语法配置，git配置等。

• index.html                   ------------------------首页入口文件，你可以添加一些 meta 信息或统计代码啥的。

• package.json              ------------------------项目配置文件。

• README.md             ------------------------项目的说明文档，markdown 格式

我写项目在src下面的pages/home保存，里面都是我跟着讲师一起写的主页页面

2）项目主页介绍：

主页分为五个部分（Header，Swiper，Icons，Recommend，Weekend）本次博客就是写我在这次项目的心得

我下面就是贴代码了，我自己建议是不往下面看，下面直接拿出去就可以用

二、Header.vue

<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon"></div>
    </div>
    <div class="header-input">
      <span class="iconfont"></span>
      输入城市/景点/游玩主题
    </div>
    <div class="header-right">
      {{this.city}}<span class="iconfont arrow-icon"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: {
    city: String
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
  height 0.86rem
  line-height 0.86rem
  display flex
  background $bgColor
  color #ffffff
  .header-left
    width 0.64rem
    float left
    .back-icon
      text-align center
      font-size 0.4rem
  .header-input
    padding-left 0.2rem
    margin 0.12rem 0.2rem
    height 0.64rem
    line-height 0.64rem
    flex 1
    background #ffffff
    border-radius 0.1rem
    color #cccccc
  .header-right
    width 1.24rem
    float right
    text-align center
    .arrow-icon
      font-size 0.24rem
</style>

　　

三、Swiper.vue

<template>
    <div class="wrapper">
        <swiper :options="swiperOption" v-if="showSwiper">
            <swiper-slide v-for="item of swiperList" :key="item.id">
              <img class="swiper-img" :src="item.imgUrl" />
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  props: {
    swiperList: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  },
  computed: {
    showSwiper () {
      return this.swiperList.length
    }
  }
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
  background #fff
.wrapper
  width 100%
  height 0
  overflow hidden
  padding-bottom 31.25%
  background #ffffff
  .swiper-img
    width 100%
    height 31.25vw
  .swiper-pagination-bullet-active
    background red !important
</style>

　　

四、Icons.vue

<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="page of pages" :key="page.index">
        <div class="icon" v-for="item of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-img-content" :src="item.imgUrl" alt="">
            <p class="icon-desc" v-text="item.desc"></p>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    iconList: Array
  },
  data () {
    return {
      swiperOption: {
        autoplay: false
      }
    }
  },
  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
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.icons >>> .swiper-container
  height 0
  padding-bottom 50%
.icons
  margin-top 0.1rem
  .icon
    position relative
    overflow hidden
    float left
    width 25%
    height 0
    padding-bottom 25%
    .icon-img
      position absolute
      top 0
      left 0
      right 0
      bottom 0.44rem
      box-sizing border-box
      padding 0.1rem
      .icon-img-content
        display block
        margin 0 auto
        height 100%
        width 100%
    .icon-desc
      position absolute
      left 0
      right 0
      height 0.44rem
      line-height 0.44rem
      text-align center
      color $darkTextColor
      ellipsis()
</style>

　　

五、Recommend.vue

<template>
  <div>
    <div class="recommend-title">热销推荐</div>
    <ul>
      <li class="item border-bottom" v-for="item of recommendList" :key="item.id">
        <img :src="item.imgUrl" alt="" class="item-img">
        <div class="item-info">
          <p class="item-title" v-text="item.title"></p>
          <p class="item-desc" v-text="item.desc"></p>
          <button class="item-button">查看详情</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.recommend-title
  margin-top 0.2rem
  line-height 0.8rem
  background #eeeeee
  text-indent 0.2rem
.item
  overflow hidden
  display flex
  height 1.9rem
.item-img
  width 1.7rem
  height 1.7rem
  padding 0.1rem
.item-info
  flex 1
  padding 0.1rem
  min-width 0
.item-title
  line-height 0.54rem
  font-size 0.32rem
  ellipsis()
.item-desc
  line-height 0.4rem
  color #cccccc
  ellipsis()
.item-button
  line-height 0.44rem
  margin-top 0.16rem
  background #ff9300
  padding 0 0.2rem
  border-radius 0.06rem
  color #ffffff
</style>

　　

六、Weekend.vue

<template>
  <div>
    <div class="weekend-title">周末去哪儿</div>
    <ul>
      <li class="item border-bottom" v-for="item of weekendList" :key="item.id">
        <div class="item-img-wrapper">
          <img :src="item.imgUrl" alt="" class="item-img">
        </div>
        <div class="item-info">
          <p class="item-title" v-text="item.title"></p>
          <p class="item-desc" v-text="item.desc"></p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    weekendList: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.weekend-title
  line-height 0.8rem
  background #eeeeee
  text-indent 0.2rem
.item-img-wrapper
  height 0
  overflow hidden
  padding-bottom 33.9%
.item-img
  width 100%
  height 158px
.item-info
  padding 0.1rem
.item-title
  line-height 0.54rem
  font-size 0.32rem
  ellipsis()
.item-desc
  line-height 0.4rem
  color #cccccc
  ellipsis()
</style>

　　

七、Home.vue

<template>
  <div>
    <home-header :city="city"></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'

export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  data () {
    return {
      city: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/index.json').then(this.gitHomeInfoSucc)
    },
    gitHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendList = data.weekendList
      }
      console.log(res.data)
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

<style >
</style>