在vue3项目中安装Element ui插件的问题

问题描述

大家好,请问在Vue js上安装插件时遇到问题,所以我尝试在项目上安装Element Ui插件,安装成功,但是在我的Vs Code终端中显示了这一点:

编译了1条警告
./src/plugins/element.js中的警告 “在'vue'中找不到导出'认'(导入为'Vue')

我无法在本地服务器上访问我的项目,它只是空白。

我的Main.JS文件

import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/element.js";

createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

Package.Json

  "name": "jargonapp","version": "0.1.0","private": true,"scripts": {
    "serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"
  },"dependencies": {
    "core-js": "^3.6.5","element-ui": "^2.4.5","vue": "^3.0.0","vue-router": "^4.0.0-0","vuex": "^4.0.0-0"
  },"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0-0","vue-cli-plugin-element": "~1.0.1"
  },"eslintConfig": {
    "root": true,"env": {
      "node": true
    },"extends": [
      "plugin:vue/vue3-essential","eslint:recommended"
    ],"parserOptions": {
      "parser": "babel-eslint"
    },"rules": {}
  },"browserslist": [
    "> 1%","last 2 versions","not dead"
  ]
}

解决方法

似乎您将元素ui 2与不兼容的vue 3一起使用,要与Vue 3配合使用,您必须安装element ui plus

卸载当前版本:

npm uninstall  element-ui -S

然后安装最新的版本:

npm i element-plus -S

main.js的最低内容:

import { createApp } from "vue";
import router from "./router";
import store from "./store";

import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";

import App from "./App.vue";

createApp(App)
.use(ElementPlus)
.use(store)
.use(router)
.mount("#app");