去哪儿网app实战项目笔记——首页

去哪儿网app实战项目笔记——首页

准备

vue-cli是Vue的脚手架工具，通过vue-cli，可以快速构建一个vue项目，并且vue-cli自带webpack的各种配置。

//3.0 4.0版本
npm install -g vue/cli
vue create project-name
......//2.0版本在4.0版本下运行
npm install -g @vue/cli-init
vue init webpack project-name
......

1. 项目结构

   build：项目的webpack配置文件
   config：针对于开发环境和线上环境的配置文件
   node_modules：项目的依赖
   static：静态资源(本地数据)，只有放在static文件下的数据才能被访问到index.html是整个项目最外层的html文件
   src：源代码，是主要编写代码的地方：	main.js:整个项目的入口文件。App.vue:是总的根组件。APP组件显示当前路由对应的内容。router:index.js:路由assets:项目中的资源，如：iconfontcomponents:项目中的小组件，以.vue结尾的文件都是单文件组件。<tempalate></tempalte>中是组件的模板，<script></script>中是组件的逻辑，<style></style>中是组件的样式。
   

2. 前端路由:Vue Router（快速开发单页面应用）
   路由就是根据网址的不同，返回不同的内容给用户。
   路由的初步配置:

   import Vue from 'vue'
   import Router from 'vue-router'
   import Home from '@/pages/home/Home'
   Vue.use(Router)
   export default new Router({
   routes: [{path: '/',name: 'Home',component: Home}
   ]
   })
   

3. 移动端网页的准备
   （1）在index.html文件里加上禁止用户在手机上通过手指来进行页面的缩放的设置

   <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   

   （2）因为有些元素的样式在不同浏览器上表现不同，所以引入reset.css文件,重置元素样式，来保障所有浏览器上的样式是一样的。
   （3）移动端有1像素边框的问题：引入border.css
   （4）移动端有300ms点击延迟的问题：引入第三方库fastclick

           npm install fastclick --saveimport fastClick from 'fastclick'fastClick.attach(document.body)
   

首页

组件结构

Home.vue是home页面的根组件，下面有很多子组件。

HomeHeader

1. iconfont的使用

   1. IconFont阿里巴巴矢量库中将需要的图标加入购物车，添加至创建的一个项目
   2. 下载至本地，将压缩包中, .svg, .ttf, .woff 放入assets/styles/iconfont下，将iconfont.css放入assets/styles下。
   3. 将iconfont.css中url地址改正确
   4. 在模板中通过复制十六进制代码使用iconfont

      <span class="iconfont">&#xe632;</span>
      

2. 移动端rem的使用
   UI图中：height: 86px(UI图是iphone6的二倍图，所以css中height应为43px)
   html中的font-size = 50px，1rem = 50px, 所以43px = 0.86rem

3. 布局：(flexbox布局)

   .headerheight: .86remdisplay: flexflex-direction: rowalign-items: center.header_inputflex: 1
   

4. 用stylus在css中定义变量

   //安装
   npm install stylus --save
   npm install stylus-loader --save
   //定义
   $bgColor = #00bcd4
   //css中引入
   @import '~@/assets/styles/varibles.styl'
   

HomeSwiper

1. 引入第三方轮播插件
   npm install vue-awesome-swiper --save
   vue-awesome-swiper的使用。
2. 如果网络条件不好，页面加载时会出现图片抖动问题。
   css解决抖动问题：(占位)在资源外部加一个div，class为wrapper。

   <style lang="stylus" scoped>
   .wrapper >>> .swiper-pagination-bullet-activebackground-color: white !important
   .wrapperoverflow: hiddenwidth: 100%height: 0padding-bottom: 31.25%    (117/375=31.25%)   /*这里的百分比是图片高度相对宽度的百分比，其比值为图片的高宽比。这样设置能实现图片宽高自适应比例。*/
   .slide_imgwidth: 100%
   

HomeIcons

1. 页面布局
   

   <template>
   <div class="icons">  <!--占位--><div class="icon">  <!--小图标布局--><div class="icon-img"> <!--图片外部包裹一个div--><img class="icon-img-content" src=".png"></div><p class="icon-desc">景点门票</p></div>
   </div>
   </template><style lang="stylus" scoped>@import '~styles/varibles.styl'.iconsoverflow: hiddenheight: 0padding-bottom: 50%background-color: green.iconposition: relativeoverflow: hiddenfloat: leftwidth: 25%height: 0padding-bottom: 25%    //padding-bottom的高宽比的宽度相对的是父元素的宽度background-color: red.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembackground-color: bluebox-sizing: border-boxpadding: .1rem.icon-img-contentheight: 100%display: blockmargin: 0 auto.icon-descposition: absoluteleft: 0right: 0bottom: 0text-align: centerheight: .44remline-height: .44remcolor: $darkTextColor    
   </style>
   

2. 图标分页算法
   将pages变成二维数组，
   pages[0]: array[8],
   pages[1]:array[1]。

   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}
   }
   

3. 如果文字内容很多，想做成用三个点提示的样式：

   overflow: hidden
   white-space: nowrap
   text-overflow:ellipsis
   

Ajax获取首页数据

1. 在vue中发送ajax的工具有fetch函数，vue-resource，axios（第三方模块）。我们使用axios，因为它可以实现跨平台数据请求。

2. 整个首页（Home.vue）发一个ajax请求，获取到数据后传给每一个组件。

   methods: {     getHomeInfo () {//axios返回的结果是一个promise对象，所以使用then&#('/api/index.json').HomeInfoSucc)},//数据获取成功后，将数据赋值给当前组件的属性。getHomeInfoSucc (res) {// console.log(res)res = res.dataif ( &&console.log(res) res.data) {this.city = res.data.citythis.swiperList = res.data.swiperList}}},//页面挂载完成后，执行getHomeInfo(),请求ajax数据，mounted () {HomeInfo()}
   

3. 本来axios获取静态数据，应该是： (’/static/mock/index.json’).HomeInfoSucc)
   但是为了上线，应该将静态地址托管为：
   (’/api/index.json’).HomeInfoSucc)
   使用webpack-dev-server工具
   在webpack/index.js中设置

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

css样式小细节

1. scoped穿透
   如果我们给样式设置了scoped，这个时候组件里面的样式既不能影响外部样式，也不能被外部样式所影响。如果我们有要影响我们所使用的子组件的样式需求，我们需要进行穿透 query >>> query， query为选择器，例如:

   .wrapper >>> .swiper-pagination-bullet-active
   background-color: #ffffff !important
   

2. vue-awersome-swipper插件，轮播图默认情况下显示最后一页？
   使用axios获取数据传递给轮播组件以后直接默认显示在最后一页，因为在获取数据之前dom结构是根据空的数组来渲染的，所以在最后一页。此时可以使用v-if来解决问题、当数据完全获取到的时候再开始渲染dom结构。