一文带你快速学会Element组件库及Nginx项目打包部署流程！

前面介绍了三剑客(HTML,CSS,JavaScript)，Axios和Vue，本篇将带你快速了解并使用Element组件库以及了解Nginx项目打包部署流程。
在这里插入图片描述

Element是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。
Element官方网站：https://element.eleme.cn/#/zh-CN

组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。

1）安装ElementUI组件库
在当前工程的目录下，右键打开终端
在这里插入图片描述

在终端下输入如下命令进行安装

npm install [email protected]

在这里插入图片描述

2）引入ElementUI组件库
将下述代码加入main.js文件中。

import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在这里插入图片描述

在 views目录下新建一个element目录，并在该目录下新建一个 ElementView.vue文件，用于编写本次快速入门的代码
在这里插入图片描述

3）访问官网，复制组件代码，并调整
这里我们选择一组按钮，复制其代码。当然，还有很多其他组件，可查看官方文档自行替换。

官方文档：https://element.eleme.cn/#/zh-CN/component/installation

在这里插入图片描述

黏贴到ElementView.vue文件的<div>标签中，并调整一下格式

注：选中多行，按 tab，多行会同时缩进，提高调整效率。

在这里插入图片描述

这时候运行还没有效果，因为还要在App.vue根组件中引用ElementView.vue中的内容。如下
在这里插入图片描述

点击NPM脚本中的三角形小按钮运行项目，浏览器中访问得到的地址 http://localhost:7000/ ，成功显示如下。
在这里插入图片描述

常用组件的学习比较简单，因为官方文档中提供了各种组件的代码，只需根据需要复制修改即可。

官方文档：https://element.eleme.cn/#/zh-CN/component/installation

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

以带边框表格为例。
1）在官方文档中找到组件 ->Table表格 ->带边框的表格，复制代码到我们的ElementView.vue文件中，按 ctrl+alt+l 格式化一下，这样看起来更加规整。
2）再回去复制表格对应的data数据。<