安装

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的更多相关文章

  1. DOM4J介绍与代码示例【转载】

    DOM4J是dom4j.org出品的一个开源XML解析包.Dom4j是一个易用的.开源的库,用于XML,XPath和XSLT.它应用于Java平台,采用了Java集合框架并完全支持DOM,SAX和JA ...

  2. DOM4J介绍与代码示例

    DOM4J是dom4j.org出品的一个开源XML解析包.Dom4j是一个易用的.开源的库,用于XML,XPath和XSLT.它应用于Java平台,采用了Java集合框架并完全支持DOM,SAX和JA ...

  3. NetBpm XML解读（5）

    原文: nPdl的翻译 在看NetBPM的nPdl文档时做了个翻译,一来是让自己能更好的理解nPdl,二来是希望能得到关心NetBPM的同志的指导.    由于对工作流不熟悉,所以有不少术语翻译没有把 ...

  4. 解析和操作XML文件

    Dom4j工具 使用步骤: 1)导入dom4j的核心包. dom4j-1.6.1.jar 2)编写Dom4j读取xml文件代码 1,Domj4读取xml文件 ,准备工作:读取整个文档并获取根节点 // ...

  5. 【干货分享】前端面试知识点锦集01（HTML篇）——附答案

    一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...

  6. 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 ...

  7. js DOM Element属性和方法整理

    节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...

  8. [转载]Extjs中的dom,Ext.Element和Ext.Component对象的关系

    原文地址:http://www.cnblogs.com/lwzz/archive/2011/01/30/1948106.html   Ext.Element对象是对dom对象的封装,目的是为了跨平台以 ...

  9. [转]W3C 验证 there is no attribute target for this element

    http://validator.w3.org/ 本文转自:http://hi.baidu.com/linkbestlove/item/d7fff865aefa5f0ba1cf0f04 我们要在新窗口 ...

随机推荐

  1. Cannot assign requested address的解决办法

    今天想试一下redis,写了个程序,对redis连续进行100000访问,却出现以了Cannot assign requested address的问题,我起先是以为是redis的问题(可能承受不了这 ...

  2. LeetCode 144. 二叉树的前序遍历(Binary Tree Preorder Traversal)

    144. 二叉树的前序遍历 144. Binary Tree Preorder Traversal 题目描述 给定一个二叉树,返回它的 前序 遍历. LeetCode144. Binary Tree ...

  3. MySQL（八）事务的隔离级别

    一.事务的并发问题 1.脏读:事务A读取了事务B更新的数据,然后B回滚操作,那么A读取到的数据是脏数据 2.不可重复读:事务 A 多次读取同一数据,事务 B 在事务A多次读取的过程中,对数据作了更新并 ...

  4. 【转帖】为什么redis 是单线程的？

    为什么redis 是单线程的? https://cloud.tencent.com/developer/article/1120615 云服务器企业新用户优先购,享双11同等价格 立即抢购 以前一直有 ...

  5. find_element_by_xpath()的几种方法

    Xpath (XML Path Language),是W3C定义的用来在XML文档中选择节点的语言一:从根目录/开始有点像Linux的文件查看,/代表根目录,一级一级的查找,直接子节点,相当于css_ ...

  6. WUSTOJ 1337: Car race game（C）树状数组，离散化

    题目链接:1337: Car race game 参考资料:⑴ Car race game 树状数组 棋煜,⑵ 树状数组,⑶ 离散化 补充资料:⑴ qsort,⑵ 二分查找 Description B ...

  7. 🕯国家公祭日-默哀javascript脚本

    国行公祭,祀我国殇 兽行暴虐,共御外侮 昭昭前事,惕惕后人 永失弗谖,祈愿和平 var national_memorial_days=['12-13']; var dateObj=new Date() ...

  8. 简单理解undefine和null的区别

    直接进入主题: 相同点:都表示“值的空缺” 不同点: null: 定义:一个空对象指针. 使用typeOf得到Object,相当于是一个特殊值 undefine: 定义:声明变量却未对其加以初始化的变 ...

  9. 使用angularJS设置复选框的回显状态

    思路分析: 在angularJS中,我们可以使用ng-checked="expression()"来设置复选框的状态:当expression()返回true时,该复选框为选择中状态 ...

  10. iOS CGContextRef/UIBezierPath（绘图）

    绘图的底层实现方法 注意:在drawRect方法中系统会默认创建一个上下文(C语言类型)在其他方法中不会有这样一个上下文(可以自己测试) @implementation DrawView //注意,在 ...