Vue2和Vue3项目引入ElementUI

1. Vue3 直接使用 element-ui 的方式会报错，以下是 Vue2 的引用方式

以下是 Vue2 添加 ElementUI的方式，如果Vue3 添加配置，也会报错，不能正常显示（在安装之后我们都将使用 Vue2 进行构建前端Vue项目）

创建 一个新的项目 element-ui-project

当前项目下打开终端, 安装依赖包 ,执行下面的命令 npm i element-ui -S npm i axios -S

- 打开 main.js , 导入Element-UI 相关资源.

- **创建 vue.config.js，作为配置文件的补充文件，我们不修改主配置文件package.json，便于项目的维护和扩展**

- ```js
  module.exports = {
          
   
      devServer: {
          
   
          port: "9999",
          open: true
      }
  };

将 ElementUI 的组件库 和 样式全部导入，配置使用（修改 main.js） import Vue from vue import App from ./App.vue import router from ./router // 1.导入 ElementUI 作为组件库 import ElementUI from element-ui // 2.导入 element-ui 样式 import element-ui/lib/theme-chalk/index.css // 3.配置 EL 到 Vue上，使用 ElementUI Vue.use(ElementUI) //引入axios import axios from axios //Vue对象使用axios Vue.prototype.axios = axios; Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount(#app) 在App.vue 中添加一部分代码进行测试，看是否能正常显示vue-cli-plugin-element <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <hr>

2. 以下是 Vue3 添加 ElementUI的方式，使用的是element-plus，而不是 element-ui

当前项目下打开终端, 安装依赖包 ,执行下面的命令 npm i element-plus -S npm i axios -S 打开 main.js , 导入Element-UI 相关资源. 创建 vue.config.js，作为配置文件的补充文件，我们不修改主配置文件package.json，便于项目的维护和扩展 module.exports = { devServer: { port: "9999", open: true } }; 将 ElementUI 的组件库 和 样式全部导入，配置使用（修改 main.js） import { createApp } from vue import App from ./App.vue import router from ./router // 1.导入 ElementUI 作为组件库 import ElementUI from element-plus // 2.导入 element-ui 样式 import element-plus/theme-chalk/index.css //引入axios import axios from axios createApp(App).provide($axios, axios).use(router).use(ElementUI).mount(#app) 在App.vue 中添加一部分代码进行测试，看是否能正常显示vue-cli-plugin-element <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <hr>