快速上手

本节将介绍如何在项目中使用 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. cnbolgs博客中添加Latex支持

    参考:http://www.cnblogs.com/ilogic/archive/2012/08/05/latex.html 主要是利用在线生成公式的工具:MathJax,但要在博客上获得 MathJ ...

  2. 获取spring上下文 - applicationContext

    前言 spring上下文是spring容器抽象的一种实现.将你需spring帮你管理的对象放入容器的一种对象,ApplicationContext是一维护Bean定义以及对象之间协作关第的高级接口. ...

  3. nginx 二级目录高级写法

    nginx二级目录高级配置: location ~ .*\.(html)$ { expires 1m; error_page 404 = /test/index.html; access_log /d ...

  4. js 自定义加减乘除方法(防止js自身计算错误)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. Code First 下自动更新数据库结构(Automatic Migrations)

    示例 Web.config <?xml version="1.0" encoding="utf-8"?> <configuration> ...

  6. Express配置ssl证书,为网站开启https

    本文不对express多做介绍,下面直奔主题: 一.下载证书(以腾讯云为例): 解压下载的压缩包,找到Nginx文件夹,里面有两个以crt和key结尾的文件,在你的项目根目录新建名为https的空文件 ...

  7. 常用算法之排序(Java)

    一.常用算法(Java实现) 1.选择排序(初级算法) 原理:有N个数据则外循环就遍历N次并进行N次交换.内循环实现将外循环当前的索引i元素与索引大于i的所有元素进行比较找到最小元素索引,然后外循环进 ...

  8. CCF 2017-03-1 分蛋糕

    CCF 2017-03-1 分蛋糕 题目 问题描述 小明今天生日,他有n块蛋糕要分给朋友们吃,这n块蛋糕(编号为1到n)的重量分别为a1, a2, -, an.小明想分给每个朋友至少重量为k的蛋糕.小 ...

  9. rabbitmd

    一.前期准备   (1)条件:准备3台linux系统,确保能连到download.yunwei.edu   (2)编写yum源下载脚本: vim yum-repo.sh wget -O /etc/yu ...

  10. falcon 数据丢失处理方法参考

    背景:使用 netstat -ano | grep ESTABLISH | grep 11883 监控 send_Q 和 recv_Q 的值,由于单次推送数据量在1w条以上,导致falcon-agen ...