Vue3 使用 Element Plus

Element Plus官网 https://element-plus.gitee.io/zh-CN/

一、安装Element Plus

//官网地址
https://element-plus.gitee.io/zh-CN/guide/installation.html

在VSCode打开终端，或在CMD命令行输入npm install element-plus --save，在国内推荐使用cnpm install element-plus --save

如果使用 cnpm 命令显示失败，则请先安装npm淘宝镜像：npm i -g cnpm --registry=https://registry.npm.taobao.org

cnpm install element-plus --save

如下图所示，是安装成功的效果

二、在VUE中使用

1、在main.js文件中加入上图中的内容，如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css';

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.mount('#app')

2、在需要使用Element UI的页面引入如下代码：

<el-button type="success">I am ElButton</el-button>

<script>
import { ElButton } from "element-plus";
export default {
  name: 'Home',
  components: {
    ElButton
  }
}
</script>

3、在页面中查看效果：

欢迎访问作者个人技术博客:BlackvonCode(www.blackvon.cn)