Vue2搭建基础架构（2）--- 使用Element-UI

说明

这里记录下自己在Vue2的项目使用Element-UI的过程，方便以后直接使用。这里承接自己的博客Vue2搭建基础架构（1）— 新建项目这篇博客，在该博客项目的基础上增加使用element-ui。

官方文档

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

vue-demo目录结构说明

这里我使用webstorm打开上一篇博客创建的vue-demo项目。目录如下：

安装Element-UI

官网给的命令如下：

安装命令

npm i element-ui -S

在webstorm里面的Terminal输入npm i element-ui -S命令安装该依赖。

执行完如下:

package.json会增加element-ui版本号

使用Element-UI组件

官网给的引入内容如下：

在main.js文件里面改写代码后如下:

根据官方文档使用按钮测试如下：

删除HelloWorld.vue原有内容，改为如下代码：

在package.json中点击图片中的绿色三角启动项目：

或者在Terminal控制台输入npm run serve来启动项目：

浏览器效果:
出现按钮效果，说明element-ui在项目中引入成功。