当前位置: 首页 > news >正文

element组件教学,基础

这里主要讲一下使用前的准备操作

1.直接用html开发的这样引入样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Element UI Example</title>
</head>
<body>
    <!-- 在这里使用Element UI组件 -->
</body>
</html>

2.用vues的话,这样引入在main.js文件中

全局方式

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
    el: '#app',
    // 其他配置
});

在上述代码中,先通过import引入 Element UI 的样式和组件库,然后使用Vue.use(ElementUI)进行全局注册,这样在整个 Vue 项目中都可以使用 Element UI 的组件。如果只是在某个特定组件内使用 Element UI 组件,也可以在该组件的<script>中局部引入相关组件,示例代码如下:(感觉比较麻烦,不建议这样用)

<template>
    <div>
        <el-button>按钮</el-button>
    </div>
</template>
<script>
import { Button } from 'element-ui';
export default {
    components: {
        ElButton: Button
    }
};
</script>

http://www.dtcms.com/a/38840.html

相关文章:

  • Vue2+Element实现Excel文件上传下载预览
  • RAG(检索增强生成)原理、实现与评测方法探讨
  • 流匹配(Flow Matching)教程
  • 基于Spring Boot的供应商管理系统设计与实现(LW+源码+讲解)
  • AI杂谈(二)
  • 通过Sidecar模式实现服务注册、服务发现和负载均衡的分布式系统架构
  • 二分查找(数值范围)--- koko吃香蕉
  • 【转:由Salesforce的元数据驱动引发的联想】
  • X64 TF位和Single-step单步调试的研究
  • 渗透第二次作业
  • spring结合mybatis多租户实现单库分表
  • 洛谷-新二叉树python
  • Flink SQL怎么用?
  • 深度学习模型可视化:通俗易懂的全面解读
  • 基础算法整理
  • C++20 三路比较运算符 `<=>` 与 `operator==() = default` 的深度剖析及实际应用
  • VUE向外暴露文件,并通过本地接口调用获取,前端自己生成接口获取public目录里面的文件
  • Linux进程控制
  • leetcode 73. 矩阵置零
  • 鸿蒙新版开发工具DevEco Studio不能新建模拟的解决方法
  • 两台互通的服务器使用Docker部署一主两从MySQL8.0.35
  • 【Qt】为程序增加闪退crash报告日志
  • Nginx面试宝典【刷题系列】
  • 广州无人机考试培训收费标准(附报名流程)
  • 【开源免费】基于SpringBoot+Vue.JS美食烹饪互动平台(JAVA毕业设计)
  • python 剪切音频
  • [特殊字符]️ ‌Selenium元素存在性判断的5种方法‌
  • 归纳总结一下Tensorflow、PaddlePaddle、Pytorch构建神经网络基本流程,以及使用NCNN推理的流程
  • 快速上手 Uniapp:从入门到精通的捷径
  • css 设置svg文字的对齐方式。右对齐