新乐网站制作价格杭州专业seo
目录
前言
为什么要学习 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 官网，根据浏览官网上的内容，来实现自己的目的。