Element简介与使用

Posted 2020-11-26 caoxueying2018

一、Element简介

Element，一套基于 Vue 2.0 的桌面端组件库。(本文基于vue框架，使用Angular和React请移步Element_React、Element_Angular）

二、Element使用

首先搭建一个基于 Vue 和 Element 的开发环境

1、使用npm安装：

npm i element-ui -S

2、引入 Element

在项目的入口文件main.js中，引入Element：

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

View Code

3、全局配置(可选)

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：

https://www.cnblogs.com/caoxueying2018/p/11966355.html

View Code

4、编写代码

组件实例请参考Element_Input组件