element-ui基本使用

基本使用:npm i element-uimain.js:/*** 该文件是整个项目的入口文件*/
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
// 引入Element全部样式
import 'element-ui/lib/theme-chalk/index.css';// 关闭vue的生产提示
Vue.config.productionTip = false
Vue.use(ElementUI);// 创建vue实例对象
new Vue({// 完成了功能:将App组件放入容器中render: h => h(App)
}).$mount('#app')组件:<template><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></div>
</template><script>
// import SchoolName from './components/SchoolName';
// import StudentName from './components/StudentName';export default {name: 'App',data() {return {}},methods: {},// components: {SchoolName, StudentName}
}
</script><style></style>

按需引用:第一步:npm install babel-plugin-component -D
第二步:babel.config.js 修改为:
{"presets": [["@babel/preset-env", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}
第三步:直接使用,具体看下方案例babel.config.js:module.exports = {presets: ['@vue/cli-plugin-babel/preset',["@babel/preset-env", { "modules": false }]],plugins: [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}main.js:/*** 该文件是整个项目的入口文件*/
import Vue from 'vue';
import App from './App.vue';
import { Button, Select } from 'element-ui';Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为* Vue.use(Button)* Vue.use(Select)*/// 关闭vue的生产提示
Vue.config.productionTip = false// 创建vue实例对象
new Vue({// 完成了功能:将App组件放入容器中render: h => h(App)
}).$mount('#app')组件内使用:<template><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></div>
</template><script>
// import SchoolName from './components/SchoolName';
// import StudentName from './components/StudentName';export default {name: 'App',data() {return {}},methods: {},// components: {SchoolName, StudentName}
}
</script><style></style>

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

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

相关文章

C++ this指针

通常情况下&#xff0c;类的成员函数都只涉及一个对象&#xff0c;即调用它的对象。但有时候方法可能涉及到两个对象&#xff0c;在这种情况就需要使用到C的this指针。 class Stock { private: ... double total_val; ... public: double total() const {return total_val;} }…

【Linux】进程周边002之进程状态

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.什么是状态&#xff1f; …

ChatGLM 手记

ChatGLM-6B&#xff1a;GitHub - THUDM/ChatGLM-6B: ChatGLM-6B: An Open Bilingual Dialogue Language Model | 开源双语对话语言模型 ChatGLM3&#xff1a; GitHub - THUDM/ChatGLM3: ChatGLM3 series: Open Bilingual Chat LLMs | 开源双语对话语言模型 chatglm.cpp&…

利用开源工具Chartmuseum,搭建私有helm chart仓库

1、ChartMuseum是什么? ChartMuseum 是一个用 Go 语言写的开源的 Helm Chart Repository 服务器,有多种 API 来完成对 Helm Chart Repository、Chart 以及 Server 的操作。所有可用的 API 以及使用方法可查看GitHub Repo。 2、ChartMuseum的安装 ChartMuseum安装可参考官网…

Python中的魔力编程:掌握面向对象之道

Python中的面向对象编程 背景&#xff1a; ​ 最近在看一些代码的时候&#xff0c;对类中的一些内置方法不是很懂&#xff0c;因此出一篇文章来细说一下&#xff0c;希望大家看完后对Python中类有一个清楚的认识。 基础铺垫&#xff1a; ​ 面向对象的三个特点&#xff1a;…

C语言中的成员访问:普通变量与指针变量的区别与使用

C语言中的成员访问 在C语言中&#xff0c;我们可以通过变量来访问它们的成员。根据变量的类型&#xff0c;我们使用不同的成员访问符&#xff1a;.和->。本文将详细介绍这两个成员访问符的使用。 目录 普通变量的成员访问指针变量的成员访问示例代码总结 普通变量的成员…

深入探索 Spring Boot:简化开发,加速部署的全方位利器

目录 导言 1. 自动配置&#xff08;Auto-Configuration&#xff09; 2. 起步依赖&#xff08;Starter Dependencies&#xff09; 3. 嵌入式 Web 服务器 4. Actuator 5. 外部化配置 6. 简化的安全性配置 7. Spring Boot CLI 8. Spring Boot DevTools 导言 在当今软件开…

java基础之抽象的概念(全网最详细)

一.抽象的概念 如下图所示&#xff1a; 如上图所示&#xff0c;一个父类为图形&#xff0c;计算图形的面积方法&#xff0c;那么就会有疑问&#xff0c;计算哪个图形的面积呢&#xff1f;所以这个计算图形的面积方法就称为抽象方法&#xff1b; 二.抽象方法和抽象类的格式 …

3、Kafka 线上集群部署方案怎么做?

文章目录 1、操作系统的选择1.1、I/O 模型的使用1.2、数据网络传输效率1.3、社区支持度 2、磁盘的选择3、磁盘容量的规划3.1、举例思考本问题&#xff1a;3.2、计算一下&#xff1a;3.3、规划磁盘容量时你需要考虑下面这几个元素&#xff1a; 4、带宽规划4.1、计算 总结 1、操作…

电商淘宝爬虫API与淘宝官方开放平台API的区别以及如何选择适合自己的API接口

随着数字化时代的到来&#xff0c;数据已经成为企业竞争力的重要因素。为了获取数据&#xff0c;企业或个人常常需要使用API接口。常见的API接口包括爬虫API和官方开放平台API。本文将详细介绍这两种API接口的区别以及如何选择适合自己的API接口。 一、爬虫API与官方开放平台A…

如何使用GaussDB创建外表(FOREIGN TABLE)

目录 一、前言 二、创建外表的特点 二、GaussDB创建外表访问外部数据库表&#xff08;示例&#xff09; 1、创建外表 2、FAQ&#xff1a;CREATE USER MAPPING错误 三、GaussDB创建外表映射数据文件&#xff08;示例&#xff09; 1、创建数据文件 2、创建外表 3、FAQ&a…

Java之时间类2(JDK8新增)

一、Date类 &#xff08;一&#xff09;、ZoneId&#xff1a;时区 1、概述 ZoneId是Java 8中处理时区的类。它用于表示时区标识符&#xff0c;例如“America/New_York”或“Asia/Tokyo”。一共有600个时区。 2、常用方法: static Set<String> getAvailableZoneIds()获…

C++基础知识

目录 前言&#xff1a; 命名空间 命名空间的定义 命名空间的使用 c输入与输出 缺省参数 函数重载 引用 引用的特性 常引用 引用的使用场景 引用做参数 引用做返回值 引用与指针的区别 内联函数 内联函数的特性 前言&#xff1a; C 语言是结构化和模块化的语言&…

VS CODE 出错 XHR failed

重新下载过去的版本&#xff0c;可能由于最近版本更新导致 Visual Studio Code September 2023

谈谈MYSQL主从复制原理

目录 概述 要点binlog日志 主从复制过程 总结 概述 MySQL 主从复制是指数据可以从一个MySQL数据库服务器主节点复制到一个或多个从节点。 MySQL 默认采用异步复制方式。从节点不用一直访问主服务器来更新自己的数据&#xff0c;数据的更新可以在远程连接上进行&#xff0…

Volatility3内存取证工具安装及入门在Linux下的安装教程

1-1. Volatility3简介 Volatility 是一个完全开源的工具&#xff0c;用于从内存 (RAM) 样本中提取数字工件。支持Windows&#xff0c;Linux&#xff0c;MaC&#xff0c;Android等多类型操作系统系统的内存取证。 针对竞赛这块&#xff08;CTF、技能大赛等&#xff09;基本上都…

websocket vue操作

let websocket: WebSocket; /** websocket测试 */ function connectWebsocket() {if (typeof WebSocket "undefined") {console.log("您的浏览器不支持WebSocket");return;}// let ip window.location.hostname ":8080";let ip "10.192…

瑞萨RZ/G2L核心板Linux Log目录文件详解

为了排除系统问题&#xff0c;监控系统健康状况以及了解系统与应用程序的交互方式&#xff0c;我们需要了解各log文件的作用&#xff0c;以G2L中yocto文件系统为例&#xff0c;在系统/var/log/目录下会存放记录系统中各个部分的log文件作用如下&#xff1a; 1. 文件详情 下图…

Ubuntu系统部署Inis博客并使用内网穿透发布到公网随时随地远程访问

目录 前言 推荐 1. Inis博客网站搭建 1.1. Inis博客网站下载和安装 1.2 Inis博客网站测试 1.3 cpolar的安装和注册 2. 本地网页发布 2.1 Cpolar临时数据隧道 2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09; 2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09;…

鸿蒙原生应用/元服务开发-Stage模型能力接口(二)

ohos.app.ability.AbilityConstant (AbilityConstant)一、说明 AbilityConstant提供Ability相关的枚举&#xff0c;包括设置初次启动原因、上次退出原因、迁移结果、窗口类型等。本模块首批接口从API version 9开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口…