Element快速入门
2024-04-21 06:00:56
目录
一、Element快速入门
1. 引入Element 的css、js文件 和 Vue.js（将其copy至webapp下）
2. 创建Vue核心对象
一、Element快速入门
官网：Element官网
1. 引入Element 的css、js文件 和 Vue.js（将其copy至webapp下）
如图：
<script src="js/vue.js"></script><script src="element-ui/lib/index.js"></script><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
鼠标放上去看看导入成功没 crtl+右键
2. 创建Vue核心对象
<script>new Vue({el:"#app",})</script>完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/vue.js"></script><script src="element-ui/lib/index.js"></script><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"></head>
<body>
<div id="app"><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>
<script>new Vue({el:"#app",})
</script>
</body>
</html>效果：
如下 从官网里copy的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.el-row {margin-bottom: 20px;}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}</style></head>
<body>
<div id="app"><el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col></el-row><!--添加一行，8个格子 24/8 = 3--><el-row><el-col :span="3"><div class="grid-content bg-purple"></div></el-col><el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="3"><div class="grid-content bg-purple"></div></el-col><el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="3"><div class="grid-content bg-purple"></div></el-col><el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="3"><div class="grid-content bg-purple"></div></el-col><el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col></el-row></div><script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><script>new Vue({el:"#app"})</script></body>
</html>Element快速入门相关推荐
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- jQuery 快速入门教程
内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...
- struts2教程--快速入门
Struts2框架介绍 1.三大框架 : 是企业主流 JavaEE开发的一套架构 Struts2 + Spring + Hibernate 2. 什么是框架?为什么要学框架 ? 框架 是 实现部分功能 ...
- Vue—上手实践—快速入门
原文地址:Vue快速入门 目录 3.快速入门 3.1.创建工程 3.2.安装vue 3.2.1.下载安装 3.2.2.使用CDN 3.2.3.推荐npm安装 3.3.vue入门案例 3.3.1.HTM ...
- [XML-Jsoup]Jsoup_解析_快速入门
xml常见的解析器: 1. JAXP:sun公司提供的解析器,支持dom和sax两种思想2. DOM4J:一款非常优秀的解析器3. Jsoup:jsoup 是一款Java 的HTML解析器,可直接解析 ...
- python 入门程序_非Python程序员的Python速成课程-如何快速入门
python 入门程序 This article is for people who already have experience in programming and want to learn ...
- Dash的快速入门将使您在5分钟内进入“ Hello World”
by Anuj Pahade 由Anuj Pahade Dash的快速入门将使您在5分钟内进入" Hello World" (This quick intro to Dash wi ...
- prometheus命令_Prometheus入门教程（一）：Prometheus 快速入门
点击蓝色"陈树义"关注我哟 Prometheus 是任何一个高级工程师必须要掌握的技能.那么如何从零部署一套 Prometheus 监控系统呢?本篇文章将从 Prometheus ...
- bootstrap快速入门_在5分钟内学习Bootstrap 4-快速入门指南
bootstrap快速入门 了解世界上最受欢迎的前端组件库的最新版本. (Get to know the newest version of the worlds most popular front ...
最新文章
- com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'user'
- java深度学习（一）Maven创建一个新的ND4J工程
- SpringMVC配置项学习笔记
- rocketmq 有哪些监控工具_Kafka和RocketMQ底层存储之那些你不知道的事
- vb显示文件列表_VB基本操作题4/150
- 能源感知型云计算的快速摘要
- 【小记事】电脑命令行开WiFi
- 微信小程序开发--【Hello World 及代码结构】(二)
- 利用C#编写一个GPS高程拟合（二次曲面拟合模型）程序
- 银行核心系统软件开发
- linux 更新cuda 驱动程序,记：第一次更新服务器CUDA和GPU驱动
- 微信h5游戏如何在微信中做好域名防封 防屏蔽的 工作
- C++ MFC 大湿兄作品！游戏自动跳跳防AFK 支持 自动按空格 取消 隐藏以及显示游戏。方便在公司玩。支持最小化到托盘 魔兽世界防AFK掉线
- PCM1863应用笔记
- 超详细！Jmeter性能测试（一）
- 用AnLink可以用鼠标同时操作电脑和手机
- android 身份认证技术,Android平台上基于人脸识别的身份认证系统的设计与实现
- 第k大元素（时间复杂度为O(n)）
- 关于日期正则表达式的思路详解
- 爬取14000+条数据！分析招聘网站岗位信息