search

chengfengjie / chengfengjie.github.io

我叫MT
1 stars 0 forks source link

后台系统升级vue相关改动 #4

Open chengfengjie opened 6 years ago

chengfengjie commented 6 years ago

hms系统升级前端库需求 element-ui 1.3.6 升级到 element-ui 2.1.0 vue 2.3.4 升级到 vue 2.5.13 vue-router 2.5.3 升级到 3.0.1 vuex 2.3.0 升级到 '3.0.1' vue-template-compiler 2.3.4 升级到 vue-template-compiler 2.5.13

发现问题如下 1、vue.js 的 scope 换成 slot-scope了，element-ui的el-table-column大量用到，需要修改 2、element-ui Menu标签的theme被移除了，用background-color、text-color 和 active-text-color 属性进行颜色的自定义. 3、import 'element-ui/lib/theme-default/index.css'失效了，用import 'element-ui/lib/theme-chalk/index.css'替换 4、element-ui 中的用到了 icon 属性的控件需要将名称换成全名，2.0以前是后缀 5、el-dialog 从v-model控制显示改为:visible.sync 6、自定义的Message提示框样式变了，需要重新定义样式 7、el-input-number样式变化

chengfengjie commented 6 years ago

升级之后报错: [Vue warn]: Avoid using non-primitive value as key 的解决办法 来自: https://segmentfault.com/q/1010000010697225

这里的[Vue warn]是指不要用对象或是数组作为key，用string或value作为key。 你这里很明显item是对象，:key相当于是索引的作用，提高循环性能，如果循环量较小，不写也可以的。

chengfengjie commented 6 years ago

升级之后的 JS 错误: Computed property "route" was assigned to but it has no setter 来自： https://segmentfault.com/q/1010000010358438

必须设置set方法

computed: {
  route: {
    get: function () {
      return this.$store.state.curTab.route
    },
    set: function () {
    }
  }
}
chengfengjie commented 6 years ago

升级之后代码写法变动

1、sope换成slot-scope

升级以前的写法:

<template scope="scope">
</template>

升级后的写法

<template slot-scope="scope">
</template>
2、el-dialog移除size属性

由width和fullscreen控制大小

3、el-dialog不再由v-model属性控制显示逻辑

改为用:visible.sync控制显示逻辑 升级前代码

<el-dialog v-model="saveDialog">
</el-dialog>

升级后代码

<el-dialog :visible.sync="saveDialog">
</el-dialog>
4、computed的属性必须有set和get方法

否则报错: Computed property "route" was assigned to but it has no setter

computed: {
  route: {
    get: function () {
      return this.$store.state.curTab.route
    },
    set: function () {
    }
  }
}
5、v-for中的:key必须是string或者number而且不能重复

否则报错: [Vue warn]: Avoid using non-primitive value as key