饿了么技术团队vue开源框架Element最新版本2.9.1版本

2019-06-14 21:42发布

站内文章 / 后端开发

116 0

女 | 书童

私信

简介

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，基于MIT协议。目前github star 数为38k+, 是一款非常热门的桌面端组件库。对于前端开发的朋友们Element既有基于vue版本的组件库，也有基于angular版本的组件库，当前前端开发"三国鼎立"的时刻，Element 可以说是非常值得好好学习的一个桌面端组件库。

官网截图

2.9 版本更新

新增 Backtop 组件, PageHeader 组件,
新增 InfiniteScroll 指令
Cascader[新增多选模式和 filter-method 方法]
Tag[新增 effect 属性]
Tabs[卡片模式下标题左对齐]
DatePicker[支持字符串常量]
Image[支持 attrs 和 listeners]
Theme[新增 popup 背景配置]
Chore[更新文档首页]

文档中心

本地开发

安装

# 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S

快速上手
完整引入

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

通过 CDN 引入

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -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)
});