Element-UI快速入门

Element-UI是什么？

就是一个把样式给你写好了的玩意儿，没错 就是不用你写样式。
先来看简单使用效果：

像咱们使用html+css写一个按钮，要实现左边样式可能需要写class/style然后写样式；
但使用了Element-UI。那就等于样式已经给你写好了；
直接copy过来就行了，是不是省下很多工作量！！！

好，简单理解了，就直接开始吧！
这里拿最简单Vue2-cli脚手架的项目做说明，简单说vue-cli安装教程。

安装Vue脚手架

• 前提：安装nodejs、安装vue-cli和vue（这里不作详细）

 vue create mydev（项目名）

运行

npm run dev

安装Element-UI

官网：https://element.eleme.cn/#/zh-CN/component/installation

这里我使用第一种方式，npm安装 以及全局引入（局部引入请看官网说明）

第一步，回到你的vue项目，终端命令执行：

npm i element-ui -S

第二步，点击快速上手。

在你的项目找到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)
});

ok，然后就安装完了可以使用了，是不是很简单！！！

页面使用

回到Element-UI官网，这里我随便选择一个使用

然后全选粘贴到你的项目.vue文件
保存页面看效果：

这样看来，你对Element-UI的理解是不是简单很多；看！样式都不用你自己写了！！！

除了样式，比如功能相关，官网附有最详细的功能参数说明（每一个组件使用说明都在最下方）

使用心得

（1）没错，不止样式给你写好了，功能直接拿过来用。
除了样式，比如table表格的多项功能：固定列、表头等

分页器、弹窗、选项卡、轮播图、菜单、日期选择功能等…

（2）能减少开发过程中的代码，提高开发效率。
从html+css+js三剑客，最初要一个样式一个样式的写，到后来的bootstrap。
那么Element-UI 其实就是跟bootstrap一样的组件。

Element-UI优点

1，丰富的组件库：Element UI 提供了丰富的组件，包括常见的表单、布局、导航、数据展示等多种类型的组件，覆盖了大部分常用的 UI 需求。这样可以大大减少开发者编写和调试组件的时间和工作量。

2，易于使用和学习：Element UI 的组件设计简洁明了，使用起来非常直观和方便。它提供了详细的文档和示例代码，使得开发者可以快速上手，并且在遇到问题时能够轻松找到解决方案。此外，Element UI 还支持国际化，可以方便地适配不同语言环境。

3，灵活的主题定制：Element UI 提供了丰富的主题样式，可以根据项目需求进行定制。开发者可以通过配置和自定义样式来改变组件的外观和风格，使得整个项目与设计要求更加匹配。

4，良好的兼容性和稳定性：Element UI 高度兼容不同版本的 Vue.js，同时也提供了对 TypeScript 的支持。它经过了广泛的测试和验证，具有良好的稳定性和可靠性，可以应用于各种规模的项目。

5，活跃的社区支持：Element UI 拥有活跃的社区和开发团队，持续地更新和维护组件库。在社区中，开发者可以分享经验、提出问题和贡献代码，获得及时的帮助和反馈。

其他UI框架

除了Element-UI呢，还有很多类似的UI组件，各位可以细细查看，用法都是差不多，比如：
pc端：https://ant.design/index-cn/
pc端：https://iviewui.com/view-ui-plus/guide/introduce
移动端：https://vant-ui.github.io/vant/#/zh-CN
移动端：https://mint-ui.github.io/#!/zh-cn

感谢你的阅读，如对你有帮助请收藏+关注！
只分享干货实战和精品，从不啰嗦！！！
如某处不对请留言评论，欢迎指正~
博主可收徒、常玩QQ飞车，可一起来玩玩鸭~