1. 什么是 Element？
Element，是一套为开发者、设计师和产品经理准备的基于Vue的桌面端组件库，是网站快速成型的工具。 具备一致性（与现实生活一致，与界面中一致），反馈（控制反馈，页面反馈，可视化编程），效率（简化流程，清晰明确，帮助用户识别），可控（用户决策，结果可控）这四大设计原则。
2. Element 安装使用
2. Element 安装使用
（1） 安装
一般推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 安装命令为 ：
npm i element-ui -S（2） 快速上手
b. 引入Element，可以引入整个Element，或者根据需要仅引入部分组件。 如果是一个大项目，建议完整引入 Element。 引入方式：在 main.js 中写入以下内容：
① table 表格的使用
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 的引入。 这样，一个基于 Vue 和 Element 的开发环境已经搭建完毕。 就可以着手项目的开发了。
（3）非组件样式的使用
c. 事件样式
例如 message 消息提示，这也不是组件，而是发送一个事件，那么使用时只需要参考文档发送的数据属性的选项即可。
（3）非组件样式的使用
官方提供的样式中有一部分并非是组件样式，比如：字体图标、全局指令、全局事件等，这里简单说明下这类样式的使用方法。
a. 图标样式
官方提供了很多图样式，通过阅读文件可以发现：一般情况下，使用 i 标签，并将 class 设置成对应的图标名即可。 而对于别的组件希望引入图标时（有 icon 属性的组件，例如 el-button），设置 icon 属性为标准。
b. 指令样式
例如 Loading 加载，其提供的是一个指令 v-loading，而非一个组件，那么使用也很简单，因为已经注册了全局组件，直接调用就行了。
例如 message 消息提示，这也不是组件，而是发送一个事件，那么使用时只需要参考文档发送的数据属性的选项即可。
（4） 组件的使用
Element 组件分为 Basic， Form， Data， Notice， Navigation 和 Others 这几大类。 笔者就在项目中常用的组件进行说明，结合项目实例来分享。
① table 表格的使用
基础代码如下：
表格呈现的页面如图所示：
从这段代码分析来看： data 是绑定的数组，lable 定义的是表头标签，prop 绑定的是表头对应的值。 结合自己项目再配置想要的 CSS 样式，就可以轻松实现想要的表格效果了。
结合实际项目，部分产品实现如下：
呈现效果如图所示：
② steps 步骤条的使用
部分代码如下：
呈现效果如图所示：
② steps 步骤条的使用
部分代码如下：
呈现效果如图所示：
③ card 卡片，input 输入框，Select 选择器，Cascader 联选择器，DataPicker 日期选择器组件等多种组合使用。
部分代码如下：
效果如图所示：
总而言之，element-ui 的使用还是相对比较简单的，根据文件进行步骤安装，输入需要的样式即可。 接着，你只需要找到你想要的样式，然后点开详细代码，复制到你的文件里就可以了。
参考资料：
1. Element 官网 Element - 网站快速成型工具
参考资料：
1. Element 官网 Element - 网站快速成型工具
評論