使用 Vue3.0 + Element Plus + TS/TSX

最新推荐文章于 2024-07-30 18:16:35 发布

桃子彩虹无限

最新推荐文章于 2024-07-30 18:16:35 发布

阅读量1.6k

点赞数

分类专栏：个人对话知识点文章标签： vue ts

本文链接：https://blog.csdn.net/Love_a_Peace/article/details/118935529

版权

本文详细介绍了在Vue3.0项目中使用Element Plus组件库遇到的问题，包括路由404配置、表单双向绑定的坑、setup函数中绑定DOM元素、处理隐式any类型报错、预处理器的自动化导入、设置npm仓库源和自定义双向绑定组件的实现。通过实例展示了如何解决这些问题，提供了解决方案和代码示例。

摘要由CSDN通过智能技术生成

--------------------------------- Vue3.0 问题

1. 路由：配置404

{

    path: "/:catchAll(.*)",

    name: "NotFound",

    component: () =>

      import("../views/NotFound.vue")

  }

2.表单的双向绑定：
a: input输入不显示： form表单的ref 跟 setup表单对象重名导致

    <el-form

      :model="ruleForm"

      status-icon

      label-width="100px"

      class="demo-ruleForm"

    >

      <el-form-item label="邮箱" prop="email">

        <el-input v-model="ruleForm.email"></el-input>

      </el-form-item>

      <el-form-item label="密码" prop="pass">

        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>

      </el-form-item>

    </el-form>

    const ruleForm = ref({ // 为啥用ref 不用reactive不明白哎

        email: '',

        pass: '',

    })

    return {

        ruleForm

    };

生产环境ctx就没法用了表单验证会报错 我改了下
const loginForm = ref(null)
const handleLogin = () = {
const form = unrefany(loginForm)
form.validate((valid: boolean) = {
if (valid) {
alert(submit!);
} else {
console.log(error submit!!);
return false;
}
});
}
return {
loginForm,
handleLogin
}
这样写应该就没啥问题了