搭建vue项目脚手架

安装node（这里是7.10.1版本）

安装git

在码云上 配置ssh秘钥  创建项目 clone下来  

全局安装vue脚手架  npm install --global vue-cli

在放置代码的目录（qunaApp目录） 执行webpack的打包到clone下来的目录：  

vue init webpack Travel

根据提示：先cd 到Travel 目录

          再执行 npm run dev

          项目成功之后 就输入显示的路径在浏览器打开

 

在main.js里面引入 初始化样式

reset.css，

  border.css(解决1px边框)

解决click事件延迟300ms的问题：fastclick插件

npm install fastclick --save

在main.js引入

Import fastClick from ‘fastclick’

在main.js写入：

fastClick.attach(document.body)

下载 样式预加载插件 ： 

npm install stylus --save

npm install stylus-loader --save

在<style lang=”stylus” scoped></style>  

指名使用stylus样式

scoped 只能当前组件使用该样式（为了怕影响其他组件的样式）

rem适配：

因为项目设计稿是iphon6 750px，所以html设置的是 font-size:50px 换算看如下公式:

屏幕宽度/设计稿rem宽度=页面动态font-size值（如：375/7.5=50）

获取到这个值，再赋给html元素的style：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘;

这样就设置好了每个页面的根fonts-size，因为rem单位是基于根font-size，因此只要确定一种设计稿对应手机的换算，其余屏幕尺寸均可自动适配。

上面我们得出设计稿换算rem的基准值是100，因此只需要把设计稿上的px值除以100即为我们要的rem值。

> Px/100=rem，所以100px=1rem,25px=0.25rem