1. 集成Element Plus

1.1. 安装组件

首先,确保项目已经安装了Vue 3。然后,在项目的根目录下打开命令行或终端,运行以下命令来安装Element Plus的最新版本。

    pnpm install element-plus --save

此命令将Element Plus添加到项目依赖,并下载到node_modules目录。

1.2. 引入组件

在项目中引入Element Plus有多种方式,可以全局引入所有组件,或按需引入以减少最终打包的体积。

这里以全局引入为例。在项目入口文件,即main.js中添加以下代码。

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App);
app.use(ElementPlus,{
    locale: zhCn,
})
app.mount('#app');

这段代码会导入Element Plus库及其CSS样式,并通过app.use(ElementPlus)在Vue应用中全局注册Element Plus的组件。

1.3. 引入图标

npm install @element-plus/icons-vue
pnpm install @element-plus/icons-vue