Vue+vant移动端页面的开发流程

1、开发前该准备的工具和库

一、创建项目流程

1. 下载node.js和git工具
2. 在码云网站上创建仓库，在桌面上打开git bash运行git clone （加上ssh的编码）
3. npm install -g @vue/cli 安装vue脚手架工具
4. vue create my-project(或者winpty vue.cmd create)创建项目
5. 运行git init (此命令初始化一个新本地仓库)、git add .和git commit -m ‘message’、git remote add origin +远程项目地址、git push -u origin master -f 将线上代码和码云仓库代码结合。

二、开发中引进的框架和库

1.reset.css

重置浏览器标签的样式表
https://huruqing.gitee.io/demos/source/reset.css

2、 border.css

解决移动端1像素边框的问题
border.css

3、animate.css

动画特效 npm install animate.css

4、moment.js

Moment.js 是一个简单易用的轻量级 JavaScript 日期处理类库
引入方法：

import 'moment/locale/zh-cn'
moment.locale('zh-cn');   

使用方法：例如： var now=moment().format(“YYYY年MM月DD日”);

5、swiper 轮播插件

引入方法：npm install swiper vue-awesome-swiper --save
在main.js中添加：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

使用方法：

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          // Some Swiper option/callback...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

6、better-scroll 滚动插件

引入方法： npm install better-scroll --save
在需要引入的组件中：

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(this.$refs.wrapper)dom节点，vue中通常用ref获取dom节点.

格式：

<div ref='wrapper'>
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

7、vue-lazyLoad图片懒加载

引入方法：

npm install vue-lazyload   --save

在main.js中引入：

import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

<img v-lazy=" " :key=" " alt=" " />

8、Jquery

引入方法：

npm install jquery --save

在vue.config.js中定义：

configureWebpack: {
	        plugins: [
	            new webpack.ProvidePlugin({
	                jQuery: 'jquery',
	                $: 'jquery',
					"libraryName": "vant",
					"libraryDirectory": 'es',
					"style": true
	            })
	        ]
	    }

在main.js中添加：

import $ from 'jquery'
Vue.prototype.$ = $

9、百度地图
引入方法：npm install vue-baidu-map –save
在index.html引入

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=地址"></script>

在main.js中引入：
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '地址' 
})

定义区域：

<div class="mapps" id="allmap"></div>

<script>
export default {
	name: 'mapppa',
	methods: {
		addMarker (map, point) {  // 创建图标对象   
			var myIcon = new BMap.Icon("http://xiaonongji.nongcundating.com/company/image/free_bg.gif", new BMap.Size(50, 100))  
			var marker = new BMap.Marker(point,{icon: myIcon});
			map.addOverlay(marker)
			marker.addEventListener('click', function(){
				alert('你点击了小图标')
			})
		}
	},
	mounted() {
		var map = new BMap.Map("allmap");
		var point = new BMap.Point(116.331398,39.897445);
		map.enableScrollWheelZoom(true);  //开启滚轮滑动
		var self = this
		var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r){
			if(this.getStatus() == BMAP_STATUS_SUCCESS){
				point = new BMap.Point(r.point.lng, r.point.lat)
			}
			else {
				alert('failed'+this.getStatus());
			} 
			map.centerAndZoom(point,10);
			map.enableDragging()
			self.addMarker(map,point)
			map.addControl(new BMap.NavigationControl());    
			map.addControl(new BMap.ScaleControl());    
			map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));    
			map.addControl(new BMap.MapTypeControl()); 
			var local = new BMap.LocalSearch(map,   
			    { renderOptions:{map: map, autoViewport: true}});      
			local.searchNearby("美食", "安工程");  
		},{enableHighAccuracy: true})
	}

}

10、echart 图表https://v-charts.js.org/#/
引入方法：npm i v-charts echarts -S
在main.js中引入：

import VCharts from 'v-charts'
Vue.use(VCharts)

基础用法：

<template>
  <ve-line :data="chartData"></ve-line>
</template>

<script>
  export default {
    data () {
      return {
        chartData: {
          columns: ['日期', '访问用户', '下单用户'],
          rows: [
            { '日期': '2018-05-22', '访问用户': 32371, '下单用户': 19810 },
            { '日期': '2018-05-23', '访问用户': 12328, '下单用户': 4398 },
            { '日期': '2018-05-24', '访问用户': 92381, '下单用户': 52910 }
          ]
        }
      }
    }
  }
</script>

columns 中是维度和指标的集合，v-charts 中的大部分图表都是单维度多指标，所以默认第一个值为 维度，剩余的值为指标
rows 中是数据的集合。

11、vant 移动端库
引入： npm i vant -S
在main.js中引入：

import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

三、注意事项

1、viewport可视区域的规定

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

2、禁止 iOS 识别长串数字为电话

 <meta name="format-detection" content="telephone=no" />

3、消除transition闪屏问题

1 /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
2 -webkit-transform-style: preserve-3d;
3 /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/ 
4 -webkit-backface-visibility: hidden; 

4、input的placeholder会出现文本位置偏上的情况

input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决方案时是设置css

line-height：normal;

5、浮动子元素撑开父元素盒子高度

解决方法如下：

1 父元素设置为 overflow: hidden;
2 父元素设置为 display: inline-block; 等

6、移动端路由点击多次console会出错的问题
Error: Avoided redundant navigation to current location:
解决方法：

const router = new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
	if (savedPosition) {
		return savedPosition
	}else {
		return { x: 0, y: 0 }
		}
	}
})

const originalPush = VueRouter.prototype.push
	VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err)
}