vue3使用elenent-plus

什么意思哦呢嗯

于 2023-11-23 15:18:44 发布

阅读量261

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_49171551/article/details/134577850

版权

问题：

当我按照官网的下载并且引入element-plus之后发现会报错，步骤如下：

步骤一下载：

npm install element-plus --save

步骤二在main.js中引入并注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

步骤三：在页面使用

<el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>

当我感觉能够顺利进行下去的时候，结果就是报错

[Vue warn]: resolveComponent can only be used in render() or setup(). runtime-core.esm-bundler.js:41 [Vue warn]: Unhandled error during execution of render function at <ElButton type="primary" > at <App> runtime-core.esm-bundler.js:41 Uncaught TypeError: currentRenderingInstance is null renderSlot runtime-core.esm-bundler.js:2819 default button2.mjs:83 normalizeChildren runtime-core.esm-bundler.js:7048 createBaseVNode runtime-core.esm-bundler.js:6859 _createVNode runtime-core.esm-bundler.js:6936 createVNodeWithArgsTransform runtime-core.esm-bundler.js:6813 createBlock runtime-core.esm-bundler.js:6785 setup button2.mjs:51 renderComponentRoot runtime-core.esm-bundler.js:820 componentUpdateFn runtime-core.esm-bundler.js:5748 run reactivity.esm-bundler.js:178 update runtime-core.esm-bundler.js:5861 setupRenderEffect runtime-core.esm-bundler.js:5869 mountComponent runtime-core.esm-bundler.js:5659 processComponent runtime-core.esm-bundler.js:5612 patch runtime-core.esm-bundler.js:5087 mountChildren runtime-core.esm-bundler.js:5331 mountElement runtime-core.esm-bundler.js:5238 processElement runtime-core.esm-bundler.js:5203 patch runtime-core.esm-bundler.js:5075 mountChildren runtime-core.esm-bundler.js:5331 mountElement runtime-core.esm-bundler.js:5238 processElement runtime-core.esm-bundler.js:5203 patch runtime-core.esm-bundler.js:5075 mountChildren runtime-core.esm-bundler.js:5331 mountElement runtime-core.esm-bundler.js:5238 processElement runtime-core.esm-bundler.js:5203 patch runtime-core.esm-bundler.js:5075 mountChildren runtime-core.esm-bundler.js:5331 mountElement runtime-core.esm-bundler.js:5238 processElement runtime-core.esm-bundler.js:5203 patch runtime-core.esm-bundler.js:5075 mountChildren runtime-core.esm-bundler.js:5331 processFragment runtime-core.esm-bundler.js:5546 patch runtime-core.esm-bundler.js:5061 componentUpdateFn runtime-core.esm-bundler.js:5755 run reactivity.esm-bundler.js:178 update runtime-core.esm-bundler.js:5861 setupRenderEffect runtime-core.esm-bundler.js:5869 mountComponent runtime-core.esm-bundler.js:5659 processComponent runtime-core.esm-bundler.js:5612 patch runtime-core.esm-bundler.js:5087 render runtime-core.esm-bundler.js:6379 mount runtime-core.esm-bundler.js:3832 mount runtime-dom.esm-bundler.js:1449 <anonymous> main.js:7 js app.js:41 __webpack_require__ app.js:212 __webpack_exports__ app.js:1334 O app.js:258 <anonymous> app.js:1335 <anonymous> app.js:1337 runtime-core.esm-bundler.js:2819

我一直苦苦寻找解决方案，怎么都不行，结果最后是删除依赖重新下载了。结果就可以了