ElementPlus 快速入门

目录

前言

为什么要学习 ElementPlus？

正文

步骤

1 创建 一个工程化的vue 项目

​2 安装 element-Plus :Form 表单 | Element Plus

1 点击 当前界面的指南

2 点击左边菜单栏上的安装，选择包管理器

3 运行该命令

demo(案例1 ）

步骤

1  在main.js 引入 element-plus 

2  在src 文件夹下，自定义vue 文件

3  查看效果：看到 package.json ,点击调试

4 点击 URL ,看到浏览器

做法（修改部分按钮）

总之：

demo(案例2 ）

总结

---

前言

为什么要学习 ElementPlus？

答：让我们前端界面更加美观

网址：Form 表单 | Element Plus

---

正文

步骤

1 创建 一个工程化的vue 项目

大致步骤，见 博客：初识Vue3(详细版:创建，启动vue 项目）-CSDN博客

vue 工程创建成功

2 安装 element-Plus :Form 表单 | Element Plus

步骤

1 点击 当前界面的指南

2 点击左边菜单栏上的安装，选择包管理器

• 复制 以下命令

npm install element-plus --save

3 运行该命令

注意：这里可以使用在黑窗口中运行，也可以在vscode 终端运行

这里我是在vocode 终端运行

1 打开 vocode  选择 文件---打开文件夹，找到下载好的vue 工程，导入

2 在终端运行该命令，等待 node_modules 出现 @element -plus

demo(案例1 ）

目的：展示 element-plus 官网上 button 按钮上的案例

如图所示：

步骤

1  在main.js 引入 element-plus 

在快速开始，点击 复制 完整引入代码

将复制好的代码，替换原本的main.js 代码

2  在src 文件夹下，自定义vue 文件

我这里是button.vue

打开element-plus 看到 组件

• 看到右下角 <> 这个图案，点击可以看到 这些按钮的源码

复制这些代码，粘贴到之前我们自定义的vue 文件

调整：将script 标签，放在最前头

做法：

1 在app.vue 中导入 自定义的vue 文件，同时为了更好的展示效果，我将之前的app.vue中的内容删掉

2 在script 标签中导入 button.vue ，和早template 标签中使用  自定义标签 buttonVue

---

app.vue 修改后的代码

<script setup>
import buttonVue from './button.vue'
</script><template><button-vue></button-vue>
</template>

3  查看效果：看到 package.json ,点击调试

4 点击 URL ,看到浏览器

---

如果这些组件，不符合你的要求，例如，我想要去除掉后两行

做法（修改部分按钮）

打开浏览器的检查，可以看到每一个div 都对应一行按钮

在 button.vue 除掉 后两行按钮表示的代码，刷新以下

总之：

就是通过浏览器检查，找到每一个按钮对应的代码，根据需要修改

仔细阅读 element-plus 官网

---

demo(案例2 ）

目的：延续之前的 button.vite,修改第一行的Danger 按钮改为禁用状态 

阅读 element-plus 官网，在前的button 按钮中，往下滑看到 Button API

发现 disabled表示按钮是否为禁用状态 ，默认是  flase 

现在修改 disabled 的值为true ,让 该按钮无效

效果展示

会发现，你点这个按钮和点其他按钮是不一样的！

---

总结

本篇博客，学习了element-plus ,重点是 阅读 element-plus 官网，根据浏览官网上的内容，来实现自己的目的。