去哪儿项目总结

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,然后给头部元素添加样式就可以了，点击右侧的地理位置可以跳转到搜索的页面。

(2).轮播图组件:我们已经下载完轮播图插件之后，因为请求的数据是本地的json数据，我们可以直接获取，在github中搜索vue-awesome-swiper轮播图的代码，复制到自己项目中，把不需要的删除，然后将swiper这个元素的样式设置一个padding-bottom，这个是防止页面数据没有及时更新，起到一个占位的作用，然后循环比例得到的数据。将图片的标签设置为100%，要不然图片只会显示一半

(3).九宫格组件：请求本地数据之后进行渲染就可以

(4).热销以及周末去哪儿了：都是请求到数据之后，都是遍历到页面上

               
            
         
          
{{ item.title }}
          
{{ item.desc }}
          查看详情
                       
      

 

        
            周末去哪儿
        
        
                           
                
                      
                           
                 
                    
{{ item.title }}
                    
{{ item.desc }}
                               
            
        

第二部分：城市页面

城市页面也分为四部分：头部组件，列表组件，搜索组件，字母组件

头部：

        城市选择
        
            
            
    

搜索：

        
            
        
        
            
                  
                    {{ item.name }}  
                
                
                没有找到匹配数据
                
            
        
    

列表数据：

        
            热门城市
            
                
                    {{ item.name }}
                
            
        
        
            
                {{ index }}          
            
            
                
                    {{ i.name }}
                                  
            
           

字母组件

        
                
                { index }} -->
            
            {{ item }}
            
        
    

第三部分：详情页

详情页：在这个页面里面有一个轮播图，并且点击轮播图显示大图的轮播图，点击轮播图的图片将当前页数据隐藏，并且大图显示，图片的宽和高为百分百，给一个固定定位，上、左为0，margin： 0 auto；让图片在页面上是居中显示