去哪儿项目笔记(移动端Vue.js)

一、项目准备

1 、在index.html： 设置移动端viewport。

2、 在入口文件main.js： 添加reset.css文件。
3、移动端1像素边框问题：在main.js中import添加 border.css(收藏备用)
4 、移动端浏览器点击延迟300ms才执行的问题，为了避免可引入fastclick库
npm install fastclick --save 或 npm install fastclick -S
--save 表示不管是在开发环境还是上线都需要用到。会自动添加到dependencies
5、移动端iconFont： www.iconfont.cn--->图标管理--->我的项目--->新建项目

二、首页

1. Header区域
   • 安装stylus、stylus-loader（书写样式）
     npm install stylus --save
npm install stylus-loader --save
2. 移动端布局一般选择rem格式，不用px。
   • rem是相对于html中px像素而言 (1rem = html font-size )
     假设html中设置的font-size=50px,则一个字体是43px时就相当于0.86rem
3. iconfont的使用
4. 代码优化：
   • 例如一些经常使用的颜色设置成一些变量，方便引用和维护（只需要修改变量就可以变换），比如在assets-->styles文件夹里添加varibles.styl文件来存储全局变量。
   • 使用@import '...' 在stylus里引入文件，使用变量
   • 在css中引用别的css文件要加 ~
     @import '../../../assets/styles/varibles.styl'
@import '~@/assets/styles/varibles.styl'
@import '~styles/varibles.styl'--> styles是自定义路径别名
     '~@/assets/styles/varibles.styl' -->@表示src目录，可在webpack.base.conf文件里配置。也可以自己配置自定义别名。当在webpack.base.conf文件里更改了配置后要重启npm run dev， 否则后报错。
5. 首页轮播图
   • 安装Vue-awesome-Swiper库
   • 轮播图自动撑开对下面DOM造成抖动的问题解决方式

         .swiper
             width: 100%
             height 0
             overflow hidden
             padding-bottom 26.67%  /*相对于width*/
     

   • 在使用scoped的作用是为了防止样式对其他文件产生影响，当我们想修改一个class，而这个class是引用的别的文件的，不在本文件内可使用 >>>符号。例如：

       .swiper >>> .swiper-pagination-bullet-active 
           background: #fff;
     

6. 封装mixins.styl
   • 字数太多让样式显示为省略号,引入文件直接调用

       // mixins.styl   省略符号
       ellipsis()
          overflow: hidden
          white-space: nowrap
          text-overflow: ellipsis
   

       @import '~styles/mixins.styl'
       .icon-desc
          position: absolute
          left: 0
          right: 0
          bottom: 0 
          height: 0.44rem
          line-height: 0.44rem 
          text-align: center
          color: $darkTextColor
          ellipsis()