《旅游网站笔记》首页开发

1. header区域开发

1. 安装stylus
   npm install stylus --save
npm install stylus-loader --save
2. 组件使用

<script>
import HomeHeader from './components/Header'
//引入组件
export default {
    name: 'Home',
    components: {
        HomeHeader: HomeHeader
        //HomeHeader 可以简写 局部组件
    }
}
</script> 

3. font-size在reset那里修改，rem、em会用到
4. scope表示该样式只能在该组件使用
   lang="stylus"表示用stylus方式

<style lang="stylus" scope>
.header
  display: display
  height: 86rem
</style>

---

2. IconFont和stylus定义变量并使用

1. 下载后的有用文件
   放到asset/styles/iconfont
   修改iconfont.css中的url为
   ./iconfont/iconfont.eot
   
2. 引入iconfont
   main.js中import ' '
3. Header.vue组件中使用
   官网复制代码

<div class="iconfont back-icon">&#xe624;</div>

• 颜色定义
  创建varibles.styl

$bgColor = #00bcd4   //定义颜色

• 引用定义的颜色，要用@import ' '
.css中用别名代表自定义目录时，需要加~

<style lang="stylus" scoped>@import '~@/assets/styles/varibles.styl'</style>  

• build/webpack.base.config.js文件下resolve的alias可以自定义路径

'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles'),

---

3. 首页轮播图

• 安装Github上的vue-awesome-swiper
npm install vue-awesome-swiper@2.6.7 --save

• 使用vue-awesome-swiper, README:https://github.com/surmon-china/vue-awesome-swiper
  全局使用，main.js

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

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

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

Swiper.vue组件中使用

<template>
<div class="wrapper">
 <swiper :options="swiperOption">
   <!-- slides -->
   <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: 'swiperOption',
   data() {
     return {
       swiperOption: {
       //轮播的点
       pagination: '.swiper-pagination', 
       //循环轮播
       loop: true
       }，
       //图片数组
       swiperList: [
   			{
   				id: '001 ',
   				imgUrl: ' '
   			},{
   				id: '002 ',
   				imgUrl: ' '
   			}
        ]
     }
   },
 }
</script>

1. 注册到首页Home.vue中
   import HomeSwiper from './compoents/Swiper'
components:{ HomeSwiper }
2. 使用 组件
   <home-seiper></home-header>
3. 样式

//因为有scoped所以要用样式穿透
.wrapper >>> .swiper-pagination-bullet-active
 background: #fff
.wrapper
 overflow: hidden
 //图片缩放
 width: 100%
 height: 0
 padding-bottom: 31.25%
 //图像未加载完成灰色背景
 background: #eee   

• 网络切换
  

---

4. 首页图标区域页面布局

• 新建分支：
  index-icon
• 切换分支：
  $git pull
$git checkout index-icon
• push以后合并分支
  $git checkout master //先切换
$git merge index-icon //合并

---

5. 图片区域逻辑

1. Vue.Devtools
   Chorme插件调试Vue

2. 样式封装
   1.创建一个.styl文件

ellipsis()            //隐藏、不换行、溢出用省略号方式
overflow: hidden
white-space: nowrap
text-overflow: ellipsis

2.使用封装样式

@import '~styles/mixins.styl'
.icon-desc
     ellipsis()

3. 图标轮播可以将一维数组→二维数组

---

6.推荐组件开发

---

7.周末游组件开发

---

8.Ajax获取首页数据

• axios
  Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
  相关介绍： https://www.jianshu.com/p/df464b26ae58
• static目录下文件可以被外界访问
• .gitignore忽略Git同步文件,添加static/mock该文件夹不会被同步
• congif/index.js中转发机制用本地API数据测试

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

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

---

9.首页父子组件数据传递

res.data中得city传给父组件的city；
父组件的city传给了子组件的city；
子组件要用props接收city，并赋给子组件自己的city。

 data () {
   city:""
   swiperList:[]
 }

 getHomeInfoSucc (res) {
       const data = res.data
       this.city = data.city  //res.data中得city传给父组件的city
       this.swiperList = data.swiperList
    }

 //父组件的city传给了子组件的city
 <home-header :city="city"></home-header>
 <swiper :swiperList="swiperList"</swiper>
 
 //子组件要用props接收city
 props:{
    city: String
    swiperList: []
 }