前端-Vuejs2.5开发去哪儿网

推荐 《高并发 & 微服务 & 性能调优实战案例100讲 源码下载》

Vuejs开发去哪儿网

---

重要说明 -_-||

• 项目开始日期 2018-07-22，结束日期 2018-07-28
• 更换开发环境时，记得先npm install一下，再启动（可能需要安装新的依赖）
• 更换开发环境时，切换分支后，记得git pull(只pull分支节点是不够的)
• 本项目新组件都在新分支开发,master主干合并最新分支的的代码
• 开发工具SublimeText3 (调一下右下角的Tab键的设置)
• MarkDown中使用 > (>后啥也不写)来实现一个格式分割问题(类似清除浮动)–似乎还有问题(使用3个空格可以分开上下连接的问题,有时不能使用>)
• MarkDown中好像必须在列表下才可能缩进
• 使用keep-alive组件后，可能导致F5不能加载最新的代码，直接重启dev环境。keep-alive的exclude属性会导致页面中不再回调activated ()，详见本文第六节第9点的说明

---

TODO NEXT ^_

• 首页banner图下的图标菜单在小屏iPhone上有padding距离不正常的问题
• 首页进入城市选择页面时，页面从右向左转场动画效

---

链接 -_-||

1> ES6语法及eslint语法检查

2> 经验记录

效果演示

https://jiangjiesheng.gitee.io/qu-na-er

开发笔记

一、常用指令

1. git合并到主干：

   git checkout master
   git merge [分支名称]    
   git push 
   

二、运行环境

1. node -v ==> v8.11.3
   npm -v ==> 5.6.0
   #使用淘宝镜像
   npm config set registry https://registry.npm.taobao.org
   [npm install -g cnpm --registry=https://registry.npm.taobao.org]
   

三、项目初始化

1. 安装vue

   npm install vue@^2.5.2 --save
   

2. 使用脚手架命令行工具vue-cli创建vue项目

   最好先初始化项目，再创建一些记录性文件

   #全局安装 vue-cli
   npm install --global vue-cli
   #创建一个基于 webpack 模板的新项目
   vue init webpack qu-na-er  (去哪儿网-GitBash中执行没有反应)
   
   #输入项目信息
   >> Project name qu-na-er
   >> Project description A Vue.js project
   >> Author dev@jiangjiesheng.cn
   >> Vue build (Use arrow keys)
   >> Vue build standalone
   >> Install vue-router? Yes
   >> Use ESLint to lint your code? Yes
   >> Pick an ESLint preset Standard
   >> Set up unit tests No
   >> Setup e2e tests with Nightwatch? No
   >> Should we run `npm install` for you after the project has been created? (recommended) npm
   
      vue-cli · Generated "qu-na-er".
   
   # Installing project dependencies ...
   # ========================
   
   #安装依赖
   cd qu-na-er 
   (这里是单独创建一个文件夹并初始化的，所以把项目复制到原始的创建的项目中)
   npm install 
   npm run dev
   

四、认识项目结构并引入必要文件

1. reset.css

   统一不同浏览器的默认样式,文件为src/assets/styles/reset.css,并在main.js中引用

   【本项目使用的尺寸单位是rem，是相对于html的font-size: 50px的大小来设置的】

   1rem = html font-size = 50px
   

   即

   43px = 0.86rem
   

   // 统一不同浏览器的默认样式
   import './assets/styles/reset.css'
   

2. 1像素边框

   可以显示一个类似垂直分割线的边框效果,文件为src/assets/styles/border.css,并在main.js中引用

   // 1像素边框解决方案
   import './assets/styles/border.css'
   

3. 300毫秒点击延迟(在部分浏览器上)

   安装并在main.js中引入并初始化

   npm install fastclick --save
   

   import fastclick from 'fastclick'
   // 300毫秒点击延迟
   fastclick.attach(document.body)
   

4. iconfont注册

   使用微博登录 jiangjsheng@sina.cn

   菜单 >> 图标管理 >> 我的项目

   下载后注意修改iconfont.css中的引用路径

五、去哪儿网首页

参考页面 http://piao.qunar.com/touch/

1. Header头

    首先安装css插件
   

    npm install stylus --save
    npm install stylus-loader --save
   

   stylus使用

   //scoped 对局部样式有效
   <style lang="stylus" scoped>
     .header //不要有冒号
       display: flex
       height: .86rem
       .header-left //不要有冒号
         width: .64rem
         float: left
       .header-input //不