创建项目

很简单，先打开一个cmd窗口，定位到目标目录，比如我的是D:\study\vue-element\code

执行命令 vue create vue-element-study   

vue-element-study是项目名字，可以改成自己的，如图

按回车，出现vue-cli界面

直接按回车，就是执行default这个

vue-cli会执行一会，结果如下

这样项目就创建好了，打开资源管理器，看到创建的文件如下

这几个文件先不用细看，回到cmd窗口，看到最后有两行提示

cd vue-element-study和yarn serve

这是启动项目的，在cmd里面执行一下

提示我们项目已启动，我们打开浏览器，访问http://localhost:8080试试

ok，看到默认的页面了，项目创建成功。

在刚刚的cmd窗口按ctrl+c，关掉服务（后面我们会在idea里面操作）

安装element

好了，现在轮到idea上场了，如果idea使用有不会的，只要多百度就行了

用idea打开vue-element-study项目

idea的界面如下

现在我们打开element官网文档，看如何安装element库

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

官网是用npm i element-ui -S这个命令，不过这个比较慢，我们用cnpm, 《开发环境准备》里面安装过

输入cnpm i element-ui -S 回车，很快就安装好了。

打开package.json文件，确认一下我们安装的element版本

安装成功，现在我们在页面上引入一个element控件试试

引入element的方法，当然还是看官网文档，点击“快速上手”

https://element.eleme.cn/#/zh-CN/component/quickstart

把官网里和element相关的几行代码复制到我们的main.js里面

接下来，我们在首页里添加一个element控件，测试一下是否正常

element有很多控件，很优秀，这是我们使用它的原因。

我们复制一个按钮的代码，贴到App.vue里面

保存文件，刷新网页，可以看到element的按钮正常显示了

非常成功，目标达成了！

当然我们还可以花点时间，看看element还提供了哪些控件，有个大概印象，需要的时候过来copy即可