ElementPlus 快速入门

目录

前言

[为什么要学习 ElementPlus?](#为什么要学习 ElementPlus?)

正文

步骤

[1 创建 一个工程化的vue 项目](#1 创建 一个工程化的vue 项目)

[​2 安装 element-Plus :Form 表单 | Element Plus](#2 安装 element-Plus :Form 表单 | Element Plus)

[1 点击 当前界面的指南](#1 点击 当前界面的指南)

[2 点击左边菜单栏上的安装,选择包管理器](#2 点击左边菜单栏上的安装,选择包管理器)

[3 运行该命令](#3 运行该命令)

[demo(案例1 )](#demo(案例1 ))

步骤

[1 在main.js 引入 element-plus](#1 在main.js 引入 element-plus)

[2 在src 文件夹下,自定义vue 文件](#2 在src 文件夹下,自定义vue 文件)

[3 查看效果:看到 package.json ,点击调试](#3 查看效果:看到 package.json ,点击调试)

[4 点击 URL ,看到浏览器](#4 点击 URL ,看到浏览器)

做法(修改部分按钮)

总之:

[demo(案例2 )](#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 修改后的代码

html 复制代码
<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 官网,根据浏览官网上的内容,来实现自己的目的。

相关推荐
个人看法13 小时前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
西洼工作室2 天前
设计模式与原则精要
前端·javascript·设计模式·vue
雪山上的小灰熊2 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
fcm194 天前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
王者鳜錸4 天前
方言普通话识别大模型,支持中英+202种方言识别
java·vue·语音识别
瓯雅爱分享4 天前
基于Java后端与Vue前端的MES生产管理系统,涵盖生产调度、资源管控及数据分析,提供全流程可视化支持,包含完整可运行源码,助力企业提升生产效率与管理水平
java·mysql·vue·软件工程·源代码管理
邂逅星河浪漫5 天前
【Spring AI】Ollama大模型-智能对话实现+项目实战(Spring Boot + Vue)
java·人工智能·spring boot·vue·prompt·agent·ollama
知识分享小能手5 天前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react
中杯可乐多加冰6 天前
高校迎新管理系统:基于 smardaten AI + 无代码开发实践
人工智能·低代码·语言模型·llm·vue·管理系统·无代码
这是个栗子6 天前
(二)Vue.js 指令、事件与计算属性
前端·javascript·vue