vue3使用Element Plus常见错误

2022-05-17 2114

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

1.前言

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

2. 安装运行直接报错

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

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常见错误

1.前言

2. 安装运行直接报错

3. 解决方案

4. 简单的登录场景

热门文章

最新文章

相关课程

相关电子书

相关实验场景

vue3使用Element Plus常见错误

1.前言

2. 安装运行 直接报错

3. 解决方案

4. 简单的登录场景

热门文章

最新文章

相关课程

相关电子书

相关实验场景

2. 安装运行直接报错