如果读者还不会搭建Vue项目请看我的另一篇文章
第一步cmd 安装elementPlus
npm install element-plus@(版本号)
如 npm install element-plus@2.8.4
如果没有@(版本号) 默认安装最新版本
npm install element-plus
我们可以在package.json文件里查看下载element-plus的版本号
第二步引入element-plus
在src/main.js文件中引入element-plus依赖
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
app.use(ElementPlus)
至此你就可以使用ElementPlus提供的基本组件了
拓展(使用ElementPuls的button组件)
在src/views目录下创建一个vue组件 ElementPlus-Button.vue
将生成的代码替换为
<script setup>
</script>
<template>
<div class="mb-4">
<el-button>Default</el-button>
<el-button type="primary" disabled>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>
</div>
</template>
配置路由
在router/index.js文件
routes:[]里
添加一个路径
{ path:'/button',name: 'element-plus-button',
component: () =>
import('../views/ElementPlus-Button.vue'}
运行项目
element-puls的基础教程请访问https://www.cwgj.xyz/zh-CN/component/button.html