创建项目
很简单,先打开一个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即可