ElementUI 快速入门:使用 Vue 脚手架搭建项目

server/2024/9/22 10:50:35/

文章目录

  • 一 . ElementUI 的基本安装
    • 1.1 通过 Vue 脚手架创建项目
    • 1.2 在 vue 脚手架中安装 ElementUI
    • 1.3 编写页面

ElementUI 是 Vue.js 的强大 UI 框架,让前端界面开发变得简单高效。本教程将带你从安装到实战,快速掌握 ElementUI 的核心技巧。

核心内容:
项目搭建: 快速设置 Vue 项目并集成 ElementUI。
组件使用: 学习如何在你的 Vue 应用中使用 ElementUI 组件。
页面与路由: 创建组件,配置路由,实现页面导航。
样式与图标: 定制按钮样式,使用图标库增强界面。
在这里插入图片描述
ElementUI 专栏 : https://blog.csdn.net/m0_53117341/category_12780595.html

一 . ElementUI 的基本安装

1.1 通过 Vue 脚手架创建项目

我们使用这个命令 , 就可以创建出项目名称为 element 的项目

vue init webpack element

全称是 vue-cli init webpack element , 直接使用缩写形式即可

我们可以直接运行当前项目

cd element
npm start

稍等片刻 , 我们访问控制台提供给我们的链接 , 我们就可以访问到 Vue 的主页了

1.2 在 vue 脚手架中安装 ElementUI

我们访问 ElementUI 的介绍文档

https://element.eleme.cn/#/zh-CN/component/installation

npm i element-ui -S

那接下来 , 我们还需要指定当前项目使用 ElementUI

https://element.eleme.cn/#/zh-CN/component/quickstart

那我们将这段代码粘贴到 main.js 中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

那我们重新启动项目

npm start

然后我们观察一下

:

: 这句代码指的是路由相关内容

那我们也可以将自己写的页面作为组件装载到 vue 中展示给用户

1.3 编写页面

我们需要在 components 文件夹下编写我们的页面

我们先将这个组件注册到 vue 中 , 打开 router 目录下面的 index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Button from '@/components/Button'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/button',name: 'Button',component: Button}]
})

其中 , name 属性也是可以省略的

然后我们在首页也添加一个超链接 , 点击即可跳转到我们的 Button 页面

<template><div id="app"><!-- 我们自己的标签页 --><a href="#/button">点我显示 Button</a><!-- Vue 的路由 --><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

接下来 , 我们就可以实现 Button.vue 组件了

我们将 ElementUI 官网提供给我们的样式全部复制

https://element.eleme.cn/#/zh-CN/component/button

<script setup></script><template><!-- <template> 标签内要求只能有一个 div 标签 --><div><!-- 默认按钮 --><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><!-- 简洁按钮 --><!-- 鼠标移动上去才会显示背景颜色 --><!-- 在所有标签属性中指定 plain 属性即可 --><el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row><!-- 圆角按钮 --><!-- 在所有标签属性中指定 round 属性即可 --><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><!-- 简洁按钮 --><!-- 在所有标签属性中指定 circle 属性即可 --><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row></div>
</template><style scoped></style>

我们刷新页面

那我们还可以更换简洁按钮的图标 , 打开 ElementUI 的图标库 : https://element.eleme.cn/#/zh-CN/component/icon

选择一个自己喜欢的图标 , 复制它的名称然后替换 icon 即可

<script setup></script><template><!-- <template> 标签内要求只能有一个 div 标签 --><div>type="danger" round>危险按钮</el-button></el-row><!-- 简洁按钮 --><!-- 在所有标签属性中指定 circle 属性即可 --><el-row><!-- 替换 icon 属性 --><el-button icon="el-icon-star-on" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row></div>
</template><style scoped></style>

不知道你的 Vue 工程是否创建成功 , 如果对你有帮助的话 , 还请一键三连~
在这里插入图片描述


http://www.ppmy.cn/server/120251.html

相关文章

【SQL】NVL函数的用法和MySQL中有什么不同

一、在Oracle数据库中&#xff0c;NVL函数的用法和MySQL中有什么不同&#xff1f; 在Oracle数据库中&#xff0c;NVL 函数用于将 NULL 值替换为指定的值。如果第一个参数不是 NULL&#xff0c;NVL 函数返回第一个参数的值&#xff1b;如果第一个参数是 NULL&#xff0c;它返回…

蛋白质SCOP数据库介绍

SCOP(Structural Classification of Proteins)数据库和CATH数据库是两种常用的蛋白质结构分类系统,它们通过不同的方法对已知的蛋白质三维结构进行分类,帮助研究人员理解蛋白质的进化关系和功能。 SCOP数据库简介 SCOP| Structural Classification of Proteins SCOP(Str…

【Web】PolarCTF2024秋季个人挑战赛wp

EZ_Host 一眼丁真命令注入 payload: ?host127.0.0.1;catf* 序列一下 exp: <?phpclass Polar{public $lt;public $b; } $pnew Polar(); $p->lt"system"; $p->b"tac /f*"; echo serialize($p);payload: xO:5:"Polar":2:{s:2:"…

【系统架构设计师】设计模式的分类

设计模式概述 设计模式(Design Pattern)是软件开发中的最佳实践,旨在解决常见的设计问题。它们可以分为三大类:创建型模式、结构型模式、行为型模式,每个类别都提供了解决特定问题的模式。下面将详细介绍每个类别及其包含的所有设计模式,并提供简要的说明,帮助区分不同…

2024年中国研究生数学建模竞赛D题“大数据驱动的地理综合问题”全析全解

问题一解答&#xff1a;降水量与土地利用/土地覆被类型的时空演化特征描述 1. 降水量的描述性统计方法 降水量是一个连续变化的变量&#xff0c;可以通过以下几种描述性统计方法进行时空演化特征的总结&#xff1a; 平均降水量&#xff1a;统计中国范围内1990至2020年各年份的…

有什么兼容macOS 15 Sequoia系统的加密软件?

前言&#xff1a;近日&#xff0c;苹果更新了 macOS 15 Sequoia正式版&#xff0c;已经有用户在电脑上安装使用了。在这个信息化时代&#xff0c;系统一直在更新&#xff0c;运用一些工具时需要考虑兼容性。 刚有个客户来问迅软&#xff1a;你们迅软DSE客户端支持新发布的macO…

Go语言的垃圾回收(GC)机制的迭代和优化历史

Go语言的垃圾回收&#xff08;GC&#xff09;机制自Go语言发布以来经历了多次重要的迭代和优化&#xff0c;以提高性能和减少程序运行时的停顿时间。 以下是一些关键的版本和相应的GC优化&#xff1a; Go版本GC耗时情况主要改进点Go 1.0-1.4可能达到几百毫秒至秒级使用简单的标…

传输层协议(TCP和UDP)

目录 一、UDP 1、UDPAPI 2、UDPAPI的使用 二、TCP 1、TCPAPI 2、TCP的相关特性 2.1 确认应答 2.2 超时重传 2.3 连接管理&#xff08;三次握手&#xff0c;四次挥手&#xff09; 2.4 滑动窗口 2.5 流量控制 2.6 拥塞控制 2.7 延时应答 2.8 捎带应答 2.9 面向字节…