Vue2和Vue3项目引入ElementUI组件方式不同

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>