资讯中心 Info
当前位置:爱尚教育 > 资讯中心 >
Element-ui入门使用
发布日期:2020-06-01 阅读次数:

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

 

安装

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>

快速上手

引入 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 的引入。需要注意的是,样式文件需要单独引入。

按需引入

借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-component:


npm install babel-plugin-component -D

然后,将 .babelrc 修改为:


{

  "presets": [["es2015", { "modules": false }]],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:


import Vue from 'vue';

import { Button, Select } from 'element-ui';

import App from './App.vue';



Vue.component(Button.name, Button);

Vue.component(Select.name, Select);

/* 或写为

 * Vue.use(Button)

 * Vue.use(Select)

 */



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 });

按需引入 Element:


import Vue from 'vue';

import { Button } from 'element-ui';



Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };

Vue.use(Button);

按照以上设置,项目中所有拥有 size 属性的组件的默认尺寸均为 'small',弹框的初始 z-index 为 3000。

 

课程体系
通知公告