vue工程化所遇到的问题

背景

现在项目上开始使用 vue 工程化开发，此文章主要是记录在开发的过程中所遇到的一些坑。

路径问题

在写 js 的时候，会用到一些需要通过路径引用的资源，比如使用纹理图，请求本地地图数据文件，在常规方式上直接通过写相对路径就可以了，但在工程化上，直接写相对路径，通译后，会出现路径找不到的问题 。

解决此问题，我们有两种方案：

1.先在 js 中先通过 import 将路径引用进来，再进行使用。这样编译后的路径就是正确的。

import mapBg from './images/map-bg.png';


data() {
	return {
		mapBg
  }
}

let img = new Image();
img.src = this.mapBg;

2.将资源放在 public 文件夹下，路径直接用相对路径写，默认路径就是从 public 开始。

我想请求 320.json 文件。

axiso.get(./static/map/320.json).then(res=>{...})

element-ui dialog 使用

在工程化中我们弹窗使用的是 element-ui dialog 来做为弹窗插件，在使用此组件的过程中，遇到了当我关闭了打开的弹窗，然后再打开弹窗的时候，还保留着之前弹窗的数据，mouunted 生命周期也没有执行，此时我们需要在弹窗组件上加个 v-if 来判断，手动将其销毁。

<el-dialog
    class="sal-money"
    title="低边救助户数申请详情"
    :visible.sync="thirdVisible"
    v-if="thirdVisible"
>
    <layer-sal-money-detail
        :params="familyParams"
    ></layer-sal-money-detail>
</el-dialog>

在使用弹窗的过程中，我们还会遇到，弹窗里面打开弹窗，我们以前常规方式，打开的弹窗的方法会写在外面弹窗里面，但在使用此组件的时候，是不能这样，因为他弹窗生成的遮罩会在 body 放面，然后z-index会比外层弹窗的层级高，然后打开的子弹窗是在外层弹窗里面，就会出现屏幕都是遮罩。

<el-dialog
    title="低边救助户数申请详情"
    :visible.sync="outerVisible"
    v-if="outerVisible"
>
    <layer-sal-detail
        :type="houseType"
        @openLayerMoney="openLayerMoney"
    ></layer-sal-detail>
</el-dialog>
<el-dialog
    class="sal-money"
    title="低边救助户数申请详情"
    :visible.sync="innerVisible"
    v-if="innerVisible"
>
    <layer-sal-money
        :familyId="familyId"
        @openLayerMoneyDetail="openLayerMoneyDetail"
        @openPersonType="openPersonType"
    ></layer-sal-money>
</el-dialog>

所以在我们使用的过程，我们弹窗都是按平级来写，然后通过父子通信来进行控制显隐。

Mixin

当我们的组件有时会执行相同的方法，监听相同的参数变化，这时我们可以把他提取出来，vue2中提供了mixin，可以用来混入方法。像下面的代码，我们组件都需要从 vuex 中取 year 和 areacode ,并监听他们变化来请求接口，我们就可以将他们提取出来。

import {mapState} from 'vuex';
export const myMixin = {
    computed: {
		...mapState(['year', 'leftAreaCode']),
		publicparams() {
			return { areacode: this.leftAreaCode, year: this.year };
		}
	},
	watch: {
		// 监听地图的变化
		leftAreaCode() {
			this.getData();
		},
    //监听年份变化
		year() {
			this.getData();
		}
	},
}

然后只需要在对应的组件中将 mixin 引入进来即可。 mixin 的使用规则，如果混入的方法组件没有同名称，就执行混入的方法，如果组件中有同名的方法，就执行组件中的方法。

import {myMixin} from '@/mixin/mixin.js';
export default {
  mixins: [myXixin]
}

总结

因为刚刚接触工程化开发，所以遇到的可能都是一些基础问题。希望各位大佬不要喷。