Element-01.快速入门

news2024/11/13 6:36:55

1.什么是Element

2.快速入门 

 第二步引入ElementUI组件库,在当前的工程目录下的main.js文件中引入。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);
第一行,第四行在main.js中已经有了,因此只需要导入中间两行和最后一行即可。

3.访问官网,复制组件代码

下面演示复制button按钮组件:

在组件中找到button组件,并找到相中的组件,点击下面的倒三角,复制对应的代码。

<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>

<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>

<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>

<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>

 四段代码代表四组按钮,选择对应的按钮复制代码。

4.调整

自定义的组件在views下存放,因此在views下创建element文件夹,在其中创建ElementView.vue组件。

ElementView.vue组件的内容如下所示:<template>标签中书写html代码,展示的是类似于vue中的视图。展示的button按钮组件属于视图,因此在<template>中书写。

<script>:JS代码,定义vue当中的数据模型以及当中的方法

<style>:定义CSS样式

<template>
    <div>    <!-- div是根标签,一个<template>标签中只能有一个根标签,也即只能有一个<template>标签 -->
        <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>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

vue项目默认情况下展示的是App.vue,即跟组件项目中的内容。而我们现在想展示的是ElementView.vue中的内容,因此要在App.vue中修改对应的内容。

<!-- 模板部分,由他生成HTML代码  相当于vue当中的视图部分 -->
<template>
  <div>
    <!-- <h1>{{ message }}</h1> -->
     <element-view></element-view>
  </div>
</template>

<!-- JS代码,定义vue当中的数据模型以及当中的方法 -->
<script>
import ElementView from './views/element/ElementView.vue'   // 将ElementView.vue组件文件导入并重新命名为ElementView
export default {
  components: { ElementView },
  data () {
      return {
        /* message:"Hello Vue"     */
      }
  },
  methods: {
      
  }
}
</script>

<!-- 定义CSS样式 -->
<style>

</style>

首先在<div>标签中引入<element-view>标签,在<script>中会自动通过import将这个组件导入进来,在vue中也将这个标签加入进来了。再次运行,成功展示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2044779.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Heckman 模型及 Stata 具体操作步骤

目录 一、文献综述 二、理论原理 三、实证模型 四、稳健性检验 五、程序代码及解释 六、代码运行结果 一、文献综述 Heckman 模型自提出以来&#xff0c;在众多领域得到了广泛且深入的应用。例如&#xff0c;在劳动经济学领域&#xff0c;Heckman&#xff08;1979&#xf…

CSS小玩意儿:霓虹灯卡片

一&#xff0c;效果 二&#xff0c;代码 1&#xff0c;搭个框架 主题是一个圆角矩形&#xff0c;其中有垂直、水平居中的文字。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>霓虹灯卡片 - 步骤1…

区块链技术在Facebook中的潜力:未来趋势与挑战

数据安全的新高度 区块链技术以其去中心化和不可篡改的特性&#xff0c;正在成为提升数据安全和隐私保护的重要工具。Facebook作为全球最大的社交媒体平台之一&#xff0c;正积极探索如何将区块链技术应用于其平台&#xff0c;以增强用户数据的安全性和隐私保护。Facebook在应…

数字化营销在公域场景中的无限可能

在如今的商业领域&#xff0c;公域场景为企业提供了广阔的发展空间&#xff0c;而数字化营销则成为了企业在这些场景中脱颖而出的关键利器。 ​ 一、电商平台营销 当企业在淘宝、京东等大型电商平台开设店铺&#xff0c;数字化营销便开始大显身手。 企业不仅能踊跃参与像双十…

新华三H3CNE网络工程师认证—OSPF基础

OSPF是N1&#xff08;初级&#xff09;阶段比较重要的知识点&#xff0c;路由协议当中非常重要的一个知识点。 文章目录 一、常用的三大路由协议二、静态路由的问题1、无法适应规模较大的网络2、 无法动态响应网络变化 三、动态路由协议分类1、按工作区域分类2、按工作机制及算…

manim官方文档 _ 快速入门板块 _ 汉化 | 辅助快速理解manim功能

注 &#xff1a; 在此之前&#xff0c;请按照安装中的步骤安装 Manim 并确保其正常运行。有关在 Jupyterlab 或 Jupyter notebook 中使用 Manim 的信息&#xff0c;请参阅 IPython magic command的文档。 文章目录 概述实例一 &#xff1a;绘制一个圆形1、启动新项目 let s go2…

美股动荡,散户逆势抄底!科技股成香饽饽

最近&#xff0c;美股市场可不太平&#xff0c;各大指数纷纷下跌。面对这样的行情&#xff0c;不少投资者都有些慌了。但你知道吗&#xff1f;有一群人却在此时看到了机会&#xff0c;他们就是散户投资者&#xff01; 逆势操作&#xff0c;散户“抄底” 8月份&#xff0c;美股…

SpringBoot整合定时任务@Scheduled

SpringBoot自带的定时任务非常简单操作&#xff0c;其实就是一个Scheduled注解。 第一步&#xff1a;创建类&#xff0c;定义执行定时任务的方法 package com.oracle.springboottimer.timer;import org.springframework.scheduling.annotation.Scheduled; import org.springfr…

STM32—WDG看门狗

1.WDG简介 看门狗可以监控程序的运行状态&#xff0c;当程序因为设计漏洞、硬件故障、电磁干扰等原因&#xff0c;出现卡死或跑飞现象时&#xff0c;看门狗能及时复位程序&#xff0c;避免程序陷入长时间的罢工状态&#xff0c;保证系统的可靠性和安全性 看门狗本质是一个定时…

使用 Python和 SQLite 打造一个简单的数据库浏览器

在日常开发中&#xff0c;我们常常需要快速查看和操作SQLite数据库中的数据。虽然有许多现成的工具可以完成这一任务&#xff0c;但有时你可能想要一个更为简单、可定制的解决方案。在这篇博客中&#xff0c;我将带你一步步构建一个简单的SQLite数据库浏览器&#xff0c;它可以…

怎么将文档翻译英文?多语言翻译的4个方法

当你准备将文档翻译成英文并发送给海外客户时&#xff0c;你可能会同时感到兴奋和焦虑。 兴奋的原因是&#xff0c;你的业务即将扩展到全球市场&#xff1b;焦虑的原因是&#xff0c;如果翻译出现错误&#xff0c;可能会造成尴尬的局面。 不过&#xff0c;不必过于担心。今天…

高速信号的眼图、加重、均衡

目录 高速信号的眼图、加重、均衡眼图加重均衡线性均衡器CTLE判决反馈均衡器DFE 高速信号的眼图、加重、均衡 眼图 通常用示波器观察接收信号波形的眼图来分析码间串扰和噪声对系统性能的影响&#xff0c;从而估计系统优劣程度&#xff0c;因而眼图分析是高速互连系统信号完整…

电信天翼网关TEWA-1000E/G等系列光猫新版固件破解超级密码

实际操作机型TEWA-1006G&#xff0c;参考教程电信天翼网关TEWA-1000E/G等系列光猫破解超级密码。 之前&#xff0c;在同一个光猫上使用上述教程成功拿到了超级密码&#xff0c;但是一年之后电信远程更新了固件&#xff0c;该破解方法部分失效&#xff0c;于是我在研究之后找到了…

2024开源资产管理系统推荐 8款免费开源IT资产管理系统/软件

开源资产管理系统 开源资产管理系统是帮助企业管理、跟踪和优化其资产的强大工具。这些系统能够自动记录资产的详细信息&#xff0c;如采购日期、使用情况、维护记录等&#xff0c;从而实现资产的全生命周期管理。企业可以通过这些系统优化资产使用效率&#xff0c;减少资产闲…

8月15日笔记

masscan安装使用 首先需要有c编译器环境。查看是否有c编译器环境&#xff1a; gcc -v如果系统中已经安装了 GCC&#xff0c;这个命令将输出 GCC 的版本信息。如果未安装&#xff0c;你会看到类似于 “command not found” 的错误消息。 如果没有下载&#xff0c;使用如下命令…

SAP中如何导出物料的评估类清单?

接到内部产品控制同事请求&#xff0c;希望从系统中帮忙导出物料的评估类清单。查询到评估类对应的数据表是T025。通过SE16可以查询和输出。 输入查询条件后&#xff0c;在出现的清单中输出到本地文件&#xff0c;存储成excel文件后发给用户&#xff0c;任务完成。 这样就可以导…

掌握内网渗透之道,成为实战高手,看《内网渗透实战攻略》就够了

【文末送书】【文末送书】今天推荐一本网络安全领域优质书籍《内网渗透实战攻略》 文章目录 * 前言如何阅读本书目录文末送书 前言 ![在这里插入图片描述](https://img- blog.csdnimg.cn/direct/fd88c968fc5349aea8945ee5345d6881.jpeg) 当今&#xff0c;网络系统面临着越…

【MMdetection改进】换遍MMDET主干网络之SwinTransformer-Tiny(基于MMdetection)

OpenMMLab 2.0 体系中 MMYOLO、MMDetection、MMClassification、MMSelfsup 中的模型注册表都继承自 MMEngine 中的根注册表&#xff0c;允许这些 OpenMMLab 开源库直接使用彼此已经实现的模块。 因此用户可以在MMYOLO 中使用来自 MMDetection、MMClassification、MMSelfsup 的主…

AI作画提示词(Prompts)工程:技巧与最佳实践

GPT-4o (OpenAI) AI 作画提示词&#xff08;prompts&#xff09;工程可以极大地提高生成图像的质量和细节表现。以下是一些技巧和最佳实践&#xff0c;以帮助你优化提示词的使用&#xff1a; 一、明确的描述 1. 具体化&#xff1a;明确描述你想要的元素和风格。例如&#xff0…