vue3集成elementUI_vue3结合element-ui

1. 安装依赖

cnpm i element-ui -S
#vue3上使用elementui需要安装element-plus
cnpm install element-plus --save
1
2
3

2. 导入依赖

重写main.js文件内容

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementUI)
app.use(router).mount("#app")
1
2
3
4
5
6
7
8

3. 使用elementUI布局

新建ElementUITest.vue文件

<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
  </el-row>
</template>
1
2
3
4
5
6
7
8
9
10
11

更多布局查看官网 https://element-plus.org/zh-CN/component/layout.html