npm install lessless-loader --save-dev（2）配置less
在build/webpack.base.conf.js 的module.exports.module.rules 里面添加
{
test: /.less$/,
loader: 'style-loader!css-loader!less-loader'
},然后在组件里面使用的时候，在style标签上加上 lang=”less”，就可以正常的使用less了，这里我们来引入几个初始化项目的less文件，在src下面创建styles文件夹，放入以下文件
在每个组件里的style标签里引入index.less和variable.less
<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.hello{
h1{
color: red;
.fs(38); // mixin里数字大小函数
}
}
</style>然后上面写关于像素的样式的时候，都在mixin.less定义下，就可以实现对所有移动端的适配问题。
移动端页面切换及切换动画
此处将切换动画单独拿出来说以下，作为移动端一般要实现的需求是，第一级菜单切换不需要转场动画，第一级菜单向第二级菜单转场时需要过渡动画；针对这一需求提供以下解决方案。
需要用到动画的话肯定会用到vue的transition，不熟悉的话可以看这里，这里实现动画的解决方案是判断要执行路由的方向，如下代码，在路由配置文件里定义路由的方法
// 需要左方向动画的路由用this.$router.to('****')
Router.prototype.togo = function (path) {
this.isleft = true
this.isright = false
this.push(path)
}
// 需要右方向动画的路由用this.$router.goRight('****')
Router.prototype.goRight = function (path) {
this.isright = true
this.isleft = false
this.push(path)
}
// 需要返回按钮动画的路由用this.$router.goBack()，返回上一个路由
Router.prototype.goBack = function () {
this.isright = true
this.isleft = false
this.go(-1)
}
// 点击浏览器返回按钮执行，此时不需要路由回退
Router.prototype.togoback = function () {
this.isright = true
this.isleft = false
}上面在执行路由跳转的时候，在App.vue里面判断滑动的方向，来指定动画的方向，不需要动画的话，可以直接使用this.$router.push(‘****’)，下面是App.vue里处理的动画代码
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="Router"></router-view>
</transition>
</div>
</template><script>
export default {
