VUE3中集成Element Plus

一、安装Element Plus

打开控制台，切换到自己的项目目录下，执行下面的命令：

$npm install element-plus

     

安装成功后，打开项目目录下的package.json ,看到dependencies中已经添加了element-plus，版本为2.8.1。

安装图标

$npm install @element-plus/icons-vue

二、使用Element Plus

1.引入 element-plus

修改main.js文件，引入element-plus，如下：

import {createApp }from ‘vue’

import ‘/@/style.css’

Import‘element-plus/dist/index.css’

import ElementPlus from ‘element-plus’

 //引入ElementPlus图标库

import * as ElementPlusIconsVue from ‘@element-plus/icons-vue'

import App from '/@/App.vue'

import pinia from ‘/@/store'

import router from ‘/@/router'

const app =createApp(App)

 //注册ElementPlus图标组件

for(const [key,component] of Object.entries(ElementPlusIconsVue)){

 app.component(key,component)

 }

 app.use(pinia)

 //挂载路由器

 app.use(router)

 //挂载ElementPlus组件库

app.use(ElementPlus)

app.mount(‘#app’)

2.使用 element-plus

将图标应用到组件上，修改app.vue

 <template>

 <div>

        <h1>This is a Home Page.</h1>

<el-button type="primary">

     <Edit style="width:1em;height:1em;margin-right:8px"/>Click On </el-button>

   </div>

   </template>

 <script setup lang="ts">

   import {Edit }from '@element-plus/icons-vue' </script> <style scoped> </style>

浏览器进入http://localhost:5173/，显示：