【Vue学习笔记】Vue入门：Vue3项目中导入Element Plus UI组件

一、在Vue3项目中安装Element Plus UI库，可以使用npm或者yarn进行安装。

命令如下：

npm install element-plus --save
或者
yarn add element-plus --save

二、安装完成之后，在Vue3项目的入口文件main.js中引入Element Plus UI的样式和组件。

样式文件的引入如下：

import 'element-plus/lib/theme-chalk/index.css';

组件的引入需要单独引入每个组件或者以按需引入的方式引入。按需引入需要安装babel-plugin-component插件，具体引入方式如下：

import { createApp } from 'vue';
import { ElButton, ElInput } from 'element-plus';
import App from './App.vue';
const app = createApp(App);
app.use(ElButton);
app.use(ElInput);
app.mount('#app');

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

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

const app = createApp(App)

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

三、最后，在需要使用Element Plus UI组件的页面中，即可像普通Vue组件一样使用Element Plus UI组件。以ElButton为例，示例代码如下：

<template>
    <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>
</template>

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

四、运行效果