简介
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)
});
Hello World 示例
Button
Try Element
new Vue({
el: \'#app\',
data: function() {
return { visible: false }
}
})
