1.3 vue ui框架-element-ui框架

1 前言

ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

ElementUI官网 https://element.eleme.io

2 安装

运行命令

cnpm i element-ui -S

-S表示只在该项目下安装,不是全局安装

注意:要跳到项目所在目录运行

会在node_modules文件夹下生成element-ui子目录

3 应用

接1.1 创建第一个vue项目-CSDN博客生成的项目。

3.1 在src/main.js中引入element组件,修改后代码如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'/*引入element组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

3.2 修改src/components/HelloWorld.vue代码如下

<template><div class="hello"><h1>{{ msg }}</h1><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 {name: "HelloWorld",data() {return {msg: "使用element-ui测试",};},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

3.3 运行效果

在cmd运行命令npm run dev 然后访问http://localhost:8080,效果如下:

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

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

相关文章

hutool、esayPoi、easyExcel、读写数据,性能对比

目录 1.源码下载 2、先上结论 3、代码 3.1、实体、接口 3.2、读CSV 3.3、读Excel 3.4、写CSV 3.5、写Excel 3.6、业务示例 1.源码下载 示例源码下载&#xff08;含模板&#xff09; 2、先上结论 注意注意&#xff1a;&#xff1a;&#xff1a;&#xff1a;导出大…

基于YOLOv8深度学习的复杂场景下船舶目标检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

GL绘制自定义线条4_使用OpenGL ES实现钢笔效果

在以前的文章里http://t.csdnimg.cn/TgCtl&#xff0c;我简述了如何使用OpenGL ES实现光滑的粗线条的绘制效果&#xff0c;在闲暇时间我把它再进一步进化&#xff0c;实现了端点长度按照压感大小实现伸缩的逻辑&#xff0c;从而实现了如下的笔锋效果&#xff1a; 书写过程中的效…

包管理工具之npm也慌了?

起因 因为npm的种种问题,我很早就换成了pnpm和yarn(但是其实npm也在使用),已经很久没有关注npm的功能更新了。最近无意间进入Node18版本的安装目录,发现其除了常规的node,npm等默认安装了一个新的包corepack,这个就是今天我要分享的东西了。 注: 我因为18版本的node上…

vue3新特性v-bind in CSS

概念 v-bind in CSS和v-bind是两个不同的概念不要弄混淆了&#xff0c;点击链接可以看官网详细的解释 v-bind:是用在template模板中&#xff0c;用来动态绑定参数的内置指令&#xff0c;一般我们用的是:简写。 v-bind in CSS&#xff1a;是用在style标签中&#xff0c;来获取…

【STM32】STM32学习笔记-FLASH闪存(48)

00. 目录 文章目录 00. 目录01. FLASH简介02. 闪存模块组织03. FLASH基本结构04. FLASH解锁05. 使用指针访问存储器06. 程序存储器编程07. 选项字节08. 选项字节编程09. 选项字节擦除10. 器件电子签名11. 附录 01. FLASH简介 STM32F1系列的FLASH包含程序存储器、系统存储器和选…

灰度负载均衡和普通负载均衡有什么区别

灰度负载均衡&#xff08;Gray Load Balancing&#xff09;与普通负载均衡的主要区别在于它们服务发布和流量管理的方式。 灰度负载均衡 目的&#xff1a;主要用于灰度发布&#xff0c;即逐步向用户发布新版本的服务&#xff0c;以减少新版本可能带来的风险。工作方式&#x…

【软考】UML中的图之通信图

目录 1. 说明2. 图示3. 特性4. 例题4.1 例题1 1. 说明 1.通信图强调收发消息的对象的结构组织2.早期版本叫做协作图3.通信图强调参加交互的对象和组织4.首先将参加交互的对象作为图的顶点&#xff0c;然后把连接这些对象的链表示为图的弧&#xff0c;最后用对象发送和接收的消…

Google发布Genie硬杠Sora:通过大量无监督视频训练最终生成可交互虚拟世界

前言 Sora 问世才不到两个星期&#xff0c;谷歌的世界模型也来了&#xff0c;能力看似更强大(嗯&#xff0c;看似)&#xff1a;它生成的虚拟世界自主可控 第一部分 首个基础世界模型Genie 1.1 Genie是什么 Genie是第一个以无监督方式从未标记的互联网视频中训练的生成式交互…

8.13 OpenGL纹理和采样器:立方体贴图纹理选择

立方体贴图纹理选择 Cube Map Texture Selection 当对立方体贴图纹理进行采样时&#xff0c;s、t、r 纹理坐标被视为从立方体中心发出的方向向量 rx、ry、rz。q 坐标被忽略。在纹理应用时&#xff0c;插值的每个片段方向向量根据最大幅度坐标方向&#xff08;主轴方向&#xf…

vue-electron 项目创建记录及注意事项

vue-electron 项目创建记录及注意事项 1、使用vue ui或者命令行创建vue项目 2、添加electron插件 3、安装element-plus: npm install --save element-plus 4、修改配置文件如下图: vue.config.js增加配置&#xff1a; pluginOptions:{ electronOutput: { contextIsolation…

【Redis】深入理解 Redis 常用数据类型源码及底层实现(6.详解Set和ZSet数据结构)

本文是深入理解 Redis 常用数据类型源码及底层实现系列的第6篇&#xff5e;前5篇可移步(&#xffe3;∇&#xffe3;)/ 【Redis】深入理解 Redis 常用数据类型源码及底层实现&#xff08;1.结构与源码概述&#xff09;-CSDN博客 【Redis】深入理解 Redis 常用数据类型源码及底…

React 模态框的设计(七)整合与测试

一个弹窗是不是也挺复杂的&#xff0c;是的&#xff0c;往往看似简单的东西真正做起来很复杂。只有多试验才能出真知。光看不练肯定是不行的。下面我们来把前几节的内容整合一下就大功告成了。 _Model.jsx /** jsxImportSource emotion/react */ import { css, jsx, keyframe…

【Redis:事务】

1 &#x1f351;事务概念&#x1f351; Redis 的事务和 MySQL 的事务概念上是类似的&#xff0c;都是把⼀系列操作绑定成⼀组&#xff0c;让这⼀组能够批量执⾏。 但是注意体会 Redis 的事务和 MySQL 事务的区别: 弱化的原⼦性: redis 没有 “回滚机制”. 只能做到这些操作 “…

常用网络协议的学习

TCP/IP TCP/IP的定义 TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff0c;传输控制协议/互联网协议&#xff09;是互联网的基本协议&#xff0c;也是国际互联网络的基础。 TCP/IP 不是指一个协议&#xff0c;也不是 TCP 和 IP 这两个协议的合称…

Linux中如何进行LVM逻辑卷扩容?

#注意&#xff1a;如果lv所在的vg有空间直接扩容就ok了&#xff01; 1.创建pv pvcreate /dev/sdb 执行以上命令得到以下内容&#xff1a; Physical volume "/dev/sdb" successfully created. 2.直接vgextend扩容 vgextend vg1 /dev/sdb #卷组名字&#xff0c;将…

k8s资源管理之声明式管理方式

1 声明式管理方式 1.1 声明式管理方式支持的格式 JSON 格式&#xff1a;主要用于 api 接口之间消息的传递 YAML 格式&#xff1a;用于配置和管理&#xff0c;YAML 是一种简洁的非标记性语言&#xff0c;内容格式人性化&#xff0c;较易读 1.2 YAML 语法格式&#xff1a; ●…

.net 日志

一、Log4net 1、log4net写入文本 1、nuget引入log4net、Microsoft.Extensions.Logging.Log4Net.AspNetCore这2个 2、引入配置文件,可以直接去官网(log4net官网配置文件)复制下来,放到项目目录下面,设置成始终复制,因为这个文件最终要到我们项目运行目录下面去 3、要在pr…

Vue3+springboot实现简单登录demo

Vue3从0搭建脚手架步骤【默认已安装node.js】 前置条件&#xff1a;默认已安装node.js、yarn 第一步&#xff1a;创建项目 选择任意一个空白文件夹如下&#xff1a; cmd进入该文件夹下的命令窗口模式&#xff0c;然后输入指令创建vue项目&#xff1a;vue create my-project …

智能指针(C++)

目录 一、智能指针是什么 二、为什么需要智能指针 三、智能指针的使用和原理 3.1、RALL 3.2 智能指针的原理 3.3、智能指针的分类 3.3.1、auto_ptr 3.3.2、unique_ptr 3.3.3、shared_ptr 3.2.4、weak_ptr 一、智能指针是什么 在c中&#xff0c;动态内存的管理式通过一…