vue3 实战系列之踩过的一些坑

最近在总结一些过去的项目经验偶有所得把一些之前踩过的坑汇总一下。这篇文章我会持续更新看到啥想到啥我都会在这篇文章中补充希望大家多多关注谢谢。一、Element-plus1.1、El-table我们之前在vue2的时候给el-table slot插槽绑定内容的时候大多都是这样写的el-table-column propstatus label状态 template slot-scopescope span :class[status-tag, scope.row.status 启用 ? status-enabled : status-paused] {{ scope.row.status }} /span /template /el-table-column然而在element-plus中不支持这种写法会报错找不到 row在element-plus中应该这样写el-table-column label状态 template #defaultscope span :class[status-tag, scope.row.status 启用 ? status-enabled : status-paused] {{ scope.row.status }} /span /template /el-table-column仔细看他两有啥区别一个是不能有上面的prop其实本来就不应该有因为已经是插槽了上面还绑定参数但是在v2中不报错但是在v3中就会报错还有一个就是绑定scopev3的写法变为了#defaultscope1.2、el-dialog我们在v2中绑定弹框开关都是这样el-dialog :visible.syncaddDialogVisible width600 append-to-body/el-dialog我还记得起初我也是一直试怎么都打不开弹框我还试了是不是点击事件有问题结果是在v3中需要用v-model来绑定开关。el-dialog title项目详情 v-modelprojectVisible width600 append-to-body/el-dialog1.3、element样式我们之前在v2中修改element的样式都是用/deep/或者::v-deep::v-deep .el-table { font-family: Roboto, Source Han Sans CN, sans-serif; }但是在v3中这样是不生效的需要改为:deep():deep(.el-table) { font-family: Roboto, Source Han Sans CN, sans-serif; }1.4、el-menu我们之前做这个侧边栏的时候都是el-menu 结合el-submenu 是现实的然后title 通过 template slottitle 去绑定的然而在 element-plus 中不太一样。仔细看elementPlus 的官方文档你会发现他写的是el-sub-menu 而不是el-submenu 而且title 是通过 #title 的方式绑定的。二、环境变量2.1 process.env.在vue3 中需要将process.env.VUE_APP_BASE_URL改为import.meta.env.VUE_APP_BASE_URL