vant手机端网页开发踩坑

1、引入vant包
（1）全局引入

import Vant from ‘vant’
import 'vant/lib/index.css'

Vue.use(Vant)

（2）局部引入

<template>
	<van-list></van-list>
<template>

<script>

import {List } from 'vant'
import 'vant/lib/index.css'

export default{
	components{
		[List.name]:List
	}
}
</script>

踩坑：
引入最新版本报错，原因是vue版本和vant版本不匹配，改为2.12.2版本

npm uninstall vant
npm install vant@2.12.2

2、axios调用接口出现跨域问题
在main.js中添加

axios.defaults.baseURL = '/api'（调用接口会自动添加前缀/api）

在webpack.base.conf.js文件中添加一下代码

devServer: {
    proxy: {
      '/api': {
        // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
        target: 'https://www.baidu.com',//后台接口地址ip:port
        // 允许跨域
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
},

之后调用接口时要去掉http://ip:port，否则还是会出现跨域问题

3、在vue文件中引入less文件报错，地址是对的。

import ‘./style.less’

less-loader版本太高，改为版本5及一下就可以了

npm uninstall less-loader
npm install less-loader@5.0.0

4、ES6将JSON字符串转换为对象

attachment: "[{\"id\":\"121212\",\"name\":\"操作手册.pdf\"}]"

const arr = JSON.parse(attachment)

5、两个数组合并

a.push.apply(a,b)------将b中的所有元素添加到a中，相当于后台的a.addAll(b)
this.dataList.push.apply(this.dataList, _list);

6、使用vue-pdf组件实现预览pdf（不分页，pdf本身带有水印）

npm install vue-pdf@4.2.0
npm install pdfjs-dist@2.5.207（一定要引入这个包，否则后台会报错……catch……）

<template>
  <div class="pdf-box">
    <van-loading type="spinner" v-if="loading"/>
    <pdf v-else v-for="i in numPages" :key="i" :src="src" :page="i"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default{
	components:{
		pdf
	},

	data() {
    	return {
      		src: '', // pdf路径
      		numPages: 0,
      		loading: true
    	}
  	},
	mounted() {
    	this.initFile()
  	},
	methods:{
		initFile() {
      this.loading = true
      this.$http({
        method: 'get',
        url: this.$route.query.routeUrl,
        responseType: 'blob'
      }).then(res => {
		//得到后台返回文件流
        const blob = new Blob([res.data], {type: 'application/pdf'});
        let pdfSrc = URL.createObjectURL(blob);

        this.src = pdf.createLoadingTask({
          url: pdfSrc,
          cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/',//预览文件本身水印
          cMapPacked: true
        })
        this.src.promise.then((pdf) => {
          this.numPages = pdf.numPages
          console.log('this.numPages', this.numPages)
        }).catch(() => {
        })
        this.loading = false

      }).catch(() => {
        this.loading = false
      })


    },
}


}


</script>

<style lang=’less’>
.pdf-box {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: .28rem;

  span {
    width: 100%;
  }
}
</style>