美文网首页
vue3使用Element Plus常见错误

vue3使用Element Plus常见错误

作者: 云高风轻 | 来源:发表于2021-11-19 21:28 被阅读0次

1.前言

最近在搞着vue3,顺便也看下最新的 Elementui Plus,遇到一些问题记录如下


2. 安装运行 直接报错

报错:Can‘t import the named export ‘xxx‘ from non EcmaScript module (only default export is available)


1.png

3. 解决方案

vue.config.js 配置

  configureWebpack:{
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ]
    }
  },

4. 简单的登录场景

 <el-input v-model="name" placeholder="手机号" />
    <el-input v-model="psw" placeholder="密码" />

    <el-button type="primary" @click="login">登录</el-button>

ref单值响应式 需要 value来获取值
getLogin是封装的 api

let name = ref();
let psw = ref();
let login = async () => {
  let a = {
    phone: name.value, //186xxxx8753,
    password: psw.value, //"xxxx",
  };
  try {
    let res = await getLogin(a);
    if (res.data.code == 200) {
      Object.assign(userInfo, res.data);
      console.log("userInfo", userInfo);
      store.commit("updateUserInfo", userInfo);
      ElMessage({
        message: "登录成功",
        type: "success",
      });
    } else {
      ElMessage({
        showClose: true,
        message: "用户名错误",
        type: "error",
      });
    }
  } catch (error) {
    console.log("-----error:",error)
     ElMessage({
        showClose: true,
        message: "服务器错误",
        type: "error",
      });
  }
};

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉

相关文章

网友评论

      本文标题:vue3使用Element Plus常见错误

      本文链接:https://www.haomeiwen.com/subject/bcvetrtx.html