快速上手

本节将介绍如何在项目中使用 Element。

使用 vue-cli@3

我们为新版的 vue-cli 准备了相应的 Element 插件,你可以用它们快速地搭建一个基于 Element 的项目。

使用 Starter Kit

我们提供了通用的项目模板,你可以直接使用。对于 Laravel 用户,我们也准备了相应的模板,同样可以直接下载使用。

如果不希望使用我们提供的模板,请继续阅读。

引入 Element

你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入

在 main.js 中写入以下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'; Vue.use(ElementUI); new Vue({
el: '#app',
render: h => h(App)
});

全局配置

在引入 Element 时,可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。

size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000)。按照引入 Element 的方式,具体操作如下:

完整引入 Element:

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

02-Elenment 引入使用的更多相关文章

  1. Shell 编程基础之 [ 与 [[ 的异同

    一.简介 [ 与 test 等价,是 bash 的内部命令,GNU/linux 系统的 coreutils 软件包通常带 /usr/bin/test 和 /usr/bin/[ 命令.如果我们不用绝对路 ...

  2. shell中(),[]和[[]]的区别

    1. 首先,尽管很相似,但是从概念上讲,二者是不同层次的东西."[[",是关键字,许多shell(如ash bsh)并不支持这种方式.ksh, bash(据说从2.02起引入对[[ ...

  3. shell脚本中的[]/[[]]区别

    转自:http://www.cnblogs.com/include/archive/2011/12/09/2307905.html 引用: http://www.51testing.com/?uid- ...

  4. 浅析busybox-1.12.0中ash的脚本命令局限性

    浅析busybox-1.12.0中ash的脚本命令局限性 LUTHER= 表示将LUTHER清空,将其变为null echo ${LUTHER:-111}如果执行该句之前LUTHER变量不存在,那么显 ...

  5. js上课笔记

    Html 结构化CSS 样式JavaScript 行为交互01.JavaScript基础02.JavaScript操作BOM对象03.JavaScript操作DOM对象 *****04.JavaScr ...

  6. shell if [[ ]]和[ ]区别 || &&

    []和test 两者是一样的,在命令行里test expr和[ expr ]的效果相同. test的三个基本作用是判断文件.判断字符串.判断整数.支持使用 ”与或非“ 将表达式连接起来. test中可 ...

  7. [转帖]HR职能划分三支柱模型

    HR职能划分三支柱模型 http://blog.sina.com.cn/s/blog_afbd12640101o5hf.html COE(Centre of Excellence or Center ...

  8. Day45--js基本小结

    JavaScript基本总结 一:基本背景 01:注:ES6就是指ECMAScript 6.(2015 ECMAScript6 添加类和模块) ECMAScript和JavaScript的关系 199 ...

  9. shell中if条件字符串、数字比对,[[ ]]和[ ]区别

    目录 shell 括号 test 和 []符号 [[]] 符号 let和(())符号 "[]" , "[[]]" 和 "(())"对比 sh ...

  10. 01 微信小程序创建组件和使用组件

    01 创建组件 遇见的困难 图标显示不出来,是因为你没有在组件的css中引入,所以显示不出来. 我一直以为是一个坑.结果是自己没有整清楚 01==>在page的同级目录下,创建一个文件夹,命名为 ...

随机推荐

  1. MappingJackson2JsonView——model转成json

    一.ajax请求,返回ModelAndView对象,结果报404: @RequestMapping(value = "/video") public ModelAndView jj ...

  2. [C++] 二叉树计算文件单词数

    目录 前置技能 构造和遍历二叉树 文件的打开.读取和写入 需求描述 读取文件 构建二叉树 格式化输入输出 具体实现 main.cpp binarytree.h binarytree.cpp 使用二叉树 ...

  3. 剑指offer54:字符流中第一个不重复的字符

    1 题目描述 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g".当从该字符流中 ...

  4. loginserver 个人草稿

    <script> (function($, doc) { /*var contextpath = "http://192.168.0.102:8080/pwgtjq"; ...

  5. CSS实现自适应分隔线的N种方法

    分割线是网页中比较常见的一类设计了,比如说知乎的更多回答 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应 偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了 心想 ...

  6. linux学习之路(一)--centos7安装JDK

    一.卸载centos自带jdk 1.rpm -qa | grep java 查看包含“java”关键字的安装包. 2.然后通过    rpm -e --nodeps   后面跟系统自带的jdk名    ...

  7. JQuery 文本框控制验证数字

    $("input[name=XUEFEN]").keypress(function(event) { var keyCode = event.which; if (keyCode ...

  8. windows + Eclipse

    https://www.eclipse.org/downloads/index-packages.php 下载好后是一个压缩文件,解压并放到相要存放软件的目录,双击打开解压后的目录下eclipse.e ...

  9. linux环境weblogic的安装及新建域

    环境:inux 64位,jdk 64位,        jdk 安装用户应使用weblogic.若使用其他用户安装,须将jdk安装目录整体授权给wblogic用户 安装包:wls1036_dev.zi ...

  10. Go 实现短 url 项目

    首先说一下这种业务的应用场景: 把一个长 url 转换为一个短 url 网址 主要用于微博,二维码,等有字数限制的场景 主要实现的功能分析: 把长 url 地址转换为短 url 地址 通过短 url ...