去哪儿项目总结

1.首先分析页面结构，分清功能模块

2.然后配置好项目

3.在这个项目中，我们会用到图标，所以要在阿里图标矢量库下载需要的图标，然后将这个图标文件放在src文件夹下的assets文件夹下，并且在全局main.js中引入图标的样式

//字体图表
import "./assets/styles/iconfont/iconfont.css"

在src目录下面的assets目录下面创建styles文件，在里面引入图标

4.页面有三个页面，是首页，城市页面，详情页面,配置页面的路由

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'Home',
            component: () =>
                import ("@/views/home/home.vue")
        },
        {
            path: '/city',
            name: 'City',
            component: () =>
                import ("@/views/city/city.vue")
        },
        {
            path: '/detail/:id', //动态路由
            name: 'Detail',
            component: () =>
                import ("@/views/detail/detail.vue")
        },
    ]
})

5.配置移动端rem.js，在src目录下面创建utils文件，创建rem.js

function change() {
    let winW = document.documentElement.clientWidth || document.body.clientWidth
    document.documentElement.style.fontSize = winW * 100 / 750 + 'px'

    console.log('1rem' + (document.documentElement.clientWidth || document.body.clientWidth) * 100 / 750 + 'px');
}
change()

window.onresize = change

// 窗口大小改变事件
window.onresize = function() {
    change()
}

6.基本文件配置好之后，开始写页面的功能

第一部分：首页

首页里面包含了头部组件，轮播图组件，九宫格组件，热销推荐以及周末去哪儿了这几部分

(1).头部组件：这个就是两个阿里图标和一个盒子组成，给父盒子设置flex布局，并且子元素的盒子设置为flex:1,然后给头部元素