01 - Element
¶安装
npm 安装
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 --> <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>
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本,以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。
Hello world
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。在线演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
01 - Element的更多相关文章
- DOM4J介绍与代码示例【转载】
DOM4J是dom4j.org出品的一个开源XML解析包.Dom4j是一个易用的.开源的库,用于XML,XPath和XSLT.它应用于Java平台,采用了Java集合框架并完全支持DOM,SAX和JA ...
- DOM4J介绍与代码示例
DOM4J是dom4j.org出品的一个开源XML解析包.Dom4j是一个易用的.开源的库,用于XML,XPath和XSLT.它应用于Java平台,采用了Java集合框架并完全支持DOM,SAX和JA ...
- NetBpm XML解读(5)
原文: nPdl的翻译 在看NetBPM的nPdl文档时做了个翻译,一来是让自己能更好的理解nPdl,二来是希望能得到关心NetBPM的同志的指导. 由于对工作流不熟悉,所以有不少术语翻译没有把 ...
- 解析和操作XML文件
Dom4j工具 使用步骤: 1)导入dom4j的核心包. dom4j-1.6.1.jar 2)编写Dom4j读取xml文件代码 1,Domj4读取xml文件 ,准备工作:读取整个文档并获取根节点 // ...
- 【干货分享】前端面试知识点锦集01(HTML篇)——附答案
一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...
- Leetcode:378. Kth Smallest Element in a Sorted Matrix
题目: Given a n x n matrix where each of the rows and columns are sorted in ascending order, find the ...
- js DOM Element属性和方法整理
节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...
- [转载]Extjs中的dom,Ext.Element和Ext.Component对象的关系
原文地址:http://www.cnblogs.com/lwzz/archive/2011/01/30/1948106.html Ext.Element对象是对dom对象的封装,目的是为了跨平台以 ...
- [转]W3C 验证 there is no attribute target for this element
http://validator.w3.org/ 本文转自:http://hi.baidu.com/linkbestlove/item/d7fff865aefa5f0ba1cf0f04 我们要在新窗口 ...
随机推荐
- 【剑指offer】面试题 25. 合并两个排序的链表
面试题 25. 合并两个排序的链表 NowCoder 题目描述 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. Java 实现 ListNode Clas ...
- 029 Android 轮播图广告Banner开源框架使用
1.Banner介绍 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能. 2.使用环境配置(具体可见github开源项目) (1)添加依赖 在build.gradl ...
- Java基础笔试练习(一)
1. 若在某一个类定义中定义有如下的方法: abstract void performDial( ); 该方法属于() ? A.本地方法 B.最终方法 C.静态方法 D.抽象方法 答案: D 解析: ...
- SQL语言(一)
数据定义语言:简称DDL(Data Definition Language) create database 数据库名 character set 'utf-8'; drop database 数据库 ...
- JDBC预编译statement(preparedstatement)和statement的比较、execute与executeUpdate的区别
和 Statement一样,PreparedStatement也是用来执行sql语句的与创建Statement不同的是,需要根据sql语句创建PreparedStatement除此之外,还能够通过设置 ...
- Java中XML的四种解析方式(二)
三.JDOM解析 特征: 1.仅使用具体类,而不使用接口. 2.API大量使用了Collections类. import org.jdom2.Attribute; import org.jdom2.D ...
- Shell之监控cpu、内存、磁盘脚本
#!/bin/bash #获取内存情况 mem_total=`free | awk 'NR==2{print $2}'` #获取内存总大小 mem_use=`free | awk 'NR==2{pri ...
- python第二天---字符串的魔法
# "adcbdefg" # "a" # 判断某个东西是否在里面包含 in | not in # name = "abcdefg" # # ...
- vue+iview 通过a标签实现文件下载
vue+iview 通过a标签实现文件下载 方法一: 注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件 路径: 项目更目录-->pub ...
- jq的ajax方法
相较与js异步对象的繁琐,jq的ajax对象结构更加清晰 一:ajax对象简述 ajax(Asynchronous JavaScript and XML),异步的xml和js对象,主要用于在不刷新全局 ...