前端-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 //不
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值