推荐 《高并发 & 微服务 & 性能调优实战案例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距离不正常的问题
- 首页进入城市选择页面时,页面从右向左转场动画效
链接 -_-||
2> 经验记录
效果演示
https://jiangjiesheng.gitee.io/qu-na-er
开发笔记
一、常用指令
-
git合并到主干:
git checkout master git merge [分支名称] git push
二、运行环境
-
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]
三、项目初始化
-
安装vue
npm install vue@^2.5.2 --save
-
使用脚手架命令行工具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
四、认识项目结构并引入必要文件
-
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'
-
1像素边框
可以显示一个类似垂直分割线的边框效果,文件为src/assets/styles/border.css,并在main.js中引用
// 1像素边框解决方案 import './assets/styles/border.css'
-
300毫秒点击延迟(在部分浏览器上)
安装并在main.js中引入并初始化
npm install fastclick --save
import fastclick from 'fastclick' // 300毫秒点击延迟 fastclick.attach(document.body)
-
iconfont注册
使用微博登录 jiangjsheng@sina.cn
菜单 >> 图标管理 >> 我的项目
下载后注意修改iconfont.css中的引用路径
五、去哪儿网首页
参考页面 http://piao.qunar.com/touch/
-
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 //不