vue3引入Element plus的详细步骤

目录

一、遇到问题

二、操作步骤

---

一、遇到问题

在用vue3去引用Element UI的时候，发现了白屏不能显示，一直检查是不是代码的问题。后面找到了问题的所在，原来是vue3对应兼容的是Element Plus，要去下载对应的Element plus版本来引用才可以。

vue3相关的文章（选读）：

vue3的介绍和两种创建方式（cli和vite）_云边的快乐猫的博客-CSDN博客

node.js降低版本的方式（解决sass和node.js冲突）_云边的快乐猫的博客-CSDN博客

vue : 无法加载文件 D:\软件安装\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。（解决办法）_云边的快乐猫的博客-CSDN博客

报错：npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency tree（npm下载失败解决办法）_云边的快乐猫的博客-CSDN博客

二、操作步骤

1.现在vue3的项目终端里面输入命令下载Element plus

npm install element-plus --S --legacy-peer-deps

 2.在main.js文件里面引入如下命令和create那行也要增加Element plus进去

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'

引入完成后即：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

/*以下三行是引入的，上面的是原有自动生成的*/
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'

/*这里也要改*/
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

 3.运行启动命令，就成功了

npm run serve