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

最近在总结一些过去的项目经验，偶有所得，把一些之前踩过的坑汇总一下。这篇文章我会持续更新，看到啥想到啥我都会在这篇文章中补充，希望大家多多关注，谢谢。

一、Element-plus

1.1、El-table

我们之前在vue2的时候给el-table slot插槽绑定内容的时候大多都是这样写的

    <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <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 #default="scope">
            <span :class="['status-tag', scope.row.status === '启用' ? 'status-enabled' : 'status-paused']">
              {{ scope.row.status }}
            </span>
          </template>
        </el-table-column>

仔细看他两有啥区别，一个是不能有上面的prop，其实本来就不应该有，因为已经是插槽了，上面还绑定参数，但是在v2中不报错，但是在v3中就会报错；还有一个就是绑定scope，v3的写法变为了**#default="scope"**

**1.2、**el-dialog

我们在v2中绑定弹框开关都是这样

<el-dialog :visible.sync="addDialogVisible" width="600" append-to-body></el-dialog>

我还记得起初我也是一直试，怎么都打不开弹框，我还试了是不是点击事件有问题，结果是在v3中需要用v-model来绑定开关。

<el-dialog title="项目详情" v-model="projectVisible" width="600" append-to-body></el-dialog>

1.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 slot="title"> 去绑定的，然而在 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