上线注意事项

vue项目

项目使用npm run dev，生成可上线的dist目录。
遇到的问题

1、路径前加 .
在config文件夹下的index.js文件中，有build一栏，

assetsPublicPath:'./'

2、请求接口的路径复制到开发环境一份
在config文件夹下的prod.env.js文件中，复制dev.env.js中的API_URL

3、请求图片，图片路径有误
build文件夹下，utils.js文件
fallback:'vue-style-loader’前，加一句
publicPath:"…/…/"

在使用Element UI 时点击同一个路由，控制台报错，但不影响使用

在路由配置的index.js中，添加如下配置

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

element组件 表格怎么绑定id值

<el-table-column label="操作">
    <template slot-scope="scope">
        <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row._id)"></el-button>
    </template>
</el-table-column>

再写方法：

handleDelete(index) {
    console.log(index);
}

assets文件里的图片

当img标签里的图片是动态变化的，如果图片不是从后台获取，是在assets文件里时，要现在data里初始化其值用require的方式，具体如下：

data(){
		return{
			list:[{
				picurl:require('@/assets/img/top15on.jpg')
			}]
		}
	}

vue-cli使用插槽

先定义一个插槽组件，如果没有内容时，默认显示。slot中的内容为默认的。

<template>
	<div class="add">
		<slot>{{ this.message }}</slot>
	</div>
</template>

<script>
	export default{
		name:'add',
		data(){
			return{
				message:'没有购物车信息时，显示我'
			}
		}
	}
</script>

使用此插槽时，
首先

import ADD from './CartChild';

然后定义组件

components:{
	ADD
}

最后使用定义的组件，如果组件中包括的有内容，就不显示中的默认内容，显示组件标签中的内容。

<ADD>
	<p>有购物车信息时，显示购物车信息</p>
</ADD>

使用vant的AddressEdit地址编辑组件

地址组件需引入area.js
文件地址，下载放到你的项目文件中

https://github.com/youzan/vant/tree/dev/src/area/demo/area.js

使用时：
先引入：

import areaList from '../assets/js/area';

再areaList:areaList使用

Vue中直接使用tap事件

（1）npm i v-tap -D
（2）Main.js中引入 import vueTap from ‘v-tap’; Vue.use(vueTap);
（3）使用 <button v-tap="{methods:tap,index:'hello',haha:'haha'}">vtap</button>
（4）方法中定义

tap(event){
      console.log(event)
    }

可得到传递的参数

Methods 函数名 eg：index为传参

上线时，出现图片路径错误的问题

最后，在build文件夹中，utils.js文件，fallback:"vue-style-loader"上面的一句配置，

publicPath:"../../"，即可成功解决此问题。

ActionSheet上拉菜单

<div id="action_sheet">
	<van-button type="primary" @click="alertMenu">弹出菜单</van-button>
	<van-action-sheet v-model="show" :actions="actions" cancel-text="取消" round 

@cancel="toCancel" @select="onSelect" />
</div>

返回data

msg: '',
show: false,
actions: [{
		name: '选项1'
	},
	{
		name: '选项2'
	},
	{
		name: '选项3',
		subname: '描述信息'
	}
],

返回方法

alertMenu(){
	this.show = true;
},
onSelect(item){
	console.log(item);
	this.show = false;
	this.$toast({
		message:item.name,
		duration:500
	})
},
toCancel(){
	console.log('点击了取消');
},

AddressList地址列表

<van-address-list
  v-model="chosenAddressId"
  :list="list"
  :disabled-list="disabledList"
  disabled-text="以下地址超出配送范围"
  @add="onAdd"
  @edit="onEdit"
/>

默认选择的那一项

chosenAddressId: '1'

list返回数据中，id和chosenAddressId相等，表示点中。

购物车需定义多选框

mounted生命周期钩子函数中，需调用axios获取到数据，先给每个数据设置checked，再赋值。
（注：此顺序不可调换）

let arr = data.data;
arr.map((item)=>{
	item.checked = false;
})
this.list = arr;

步进器

步进器有@plus=plus() @minus=minus() 两个函数，传对应的id值，
调用axios时，直接传 1 或 -1