本系列将会用vue.js2制作一个移动端的webapp单页面，页面不多，大概在7,8个左右，不过麻雀虽小，五脏俱全，常用的效果如轮播图，下拉刷新，上拉加载，图片懒加载都会用到。css方面也会有一些描述，像不同分辨率的适配，flex布局以及scss来编写mixin来处理2x,3x图等。

初始工作：

通过vue-cli安装webpack模板后，会自动生成一大堆文件，通常我们只关心src/目录下的东西。 个人习惯在src下新建一个base目录，用来存放通用的css及js，比如样式重置css，一切js工具函数。

下载好文件后，npm run dev

启动服务你就会看到熟悉的hello vue。由于我们做的是移动端的页面，所以把chrome切换到手机模式（打开开发工具，ctrl+shift+m或者点左上角那个手机）

对于移动端如何适配不同的手机屏幕，估计每个人都有自己的做法，我用的是淘宝的flexible.js，根据不同类型来缩放以及调整html字体的大小，用rem来布局。使用的方法也很简单，只需要引入Js文件就可以了，。

假如你用的sublime编辑器,可以到 下载一个插件，写起来更方便；

字体的处理：

字体方面我们仍然用px来写，不过需要针对不同的缩放比例写不用的大小，比如安卓下，字体大小为14px,那么iphone6下大小应为28，Iphone6s应为42px。flexible.js会根据屏幕缩放比给html添加data-dpr属性，因此可以通过scss编写mixin来处理字体

需要用到字体的地方，@include fz(16px);

图片的处理:

通常为了适应retain和非retain屏幕，我们会准备不同的图片大小，也就是2x和3x图，我的做法是[data-dpr="3"]下使用3x图，其他情况统一使用2X图。

在为了方便，编写一个mixin来处理：（假设放在2x文件夹和3x文件夹下）

第一个参数为2x,3x文件夹所在路径，第二个参数为文件名，第三个参数为文件类型，默认为.jpg结尾。

写CSS时有些代码块可能会经常用到，因此也可以写成mixin，比如单行文本溢出和多行文本溢出：

比如左右垂直居中：

字体图标的处理：

页面通常都会有很多小图标，为了减少请求以前可能会用雪碧图来合并，不过我现在基本不用了，用字体图标来代替。我用的是阿里的在线字体图标，上传svg到阿里字体库或者直接使用阿里的图标，选中图标后添加到项目，生成地址后，import到项目中就可已使用了。

在App.vue中：

编写main组件：

页面上底部有4个tab，点击时会切换对应的组件，所以Main组件的结构是这样的

foot-nav底部导航的布局如下：

点击底部每个导航，导航上面的组件都会相应的替换。不过要注意点击购物车时，购物车页面底部需要有去结算按钮，所以购物车页面是没有导航的，也就是说购物车的路由配置时不会放在mian路由的children下面。

编写路由：

<div class="jb51code">
<pre class="brush:js;">
{
path:'/',redirect:"/home"
},{
path:'/home',component:Main,children:[
{
path:'/',redirect:"/index"
},{
path:'/index',component:Index
},{
path:'/search',component:Search
},{
path:'/vip',component:Vip
}
]
},{
path:'/car',component:Car
}