五分钟，VUE+Element UI部署安装和基本使用

背景：后端程序员只专注于后端逻辑，服务，组件，对于前端就成了短板，所谓术业有专攻，不求专业水准，但求略懂皮肤，平时做点小工具也是必要的，例如工具的DashBoard界面，能快速构建，能腾出更多时间关注后端逻辑，就可以事半功倍，下面要介绍的是MVVM模式的VUE+Element UI，VUE非常常见，具有双向绑定功能，无需刷新即见即所得，对构建前端UI能节省不少时间，Element UI也相当简单，组件能满足大部分需求；UI官网：https://element.eleme.cn/#/zh-CN；

一、安装npm，npm是链接世界javascript的工具，能获取包并利用，无需安装npm直接安装nodejs最新版本即可，这里要求最新版本，不然后续安装VUE包可能会异常，小编安装的是v12.13.1版本；

二、安装VUE，VUE和UI是可以分开的，VUE是脚手架，脱离VUE直接使用Element UI进行开发也是可以的，只是使用VUE更为方便，VUE方式注定了前后端分离，使用npm安装VUE中途可能会异常，我们这里安装淘宝镜像，安装完既可以用cnpm代替npm，一切顺利会打印出版本号（需安装cli3版本以上），然后就可以进行项目创建，创建项目命令是vue create xxx，创建vue项目时需要选择配置，选择配置时按需选择，不用选择默认default，不然会缺失配置，小编选择如下配置，其余全默认；

淘宝镜像配置命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装VUE命令：安装npm install -g @vue/cli

三、项目相关开发，小编使用的是vscode，不是非常便利但还凑合，用vscode加入工作空间后，可以看见目录，assets是静态资源，router路由，views界面文件。

四、安装依赖，使用cnpm命令进行安装依赖，右键项目选中Open in Terminal，命令是cnpm install进行依赖安装，安装完毕后即可运行，切记如果你开始使用的是npm install进行依赖安装，需要删除node_modules，重新用cnpm安装依赖；

五、项目启动，安装完依赖即可启动，cnpm run serve，启动配置可以在package.json中配置，启动后即可访问：localhost:8082，这里端口是VUE自动分配的，如果8081已被占用，则会向前+1，小编这里是8082。

六、以上VUE脚手架已完成，可以进行开发了，之前说过VUE和UI是分开的，那么UI需要通过安装方式加进VUE里面，使用ELementUI提供的安装命令：cnpm i element-ui -S进行安装，顺利安装完成，完成UI安装后，需要将UI组件引入VUE，即可结合ElementUI布局和相关组件进行开发，小编添加简单的列表相关操作。

七、界面需要获取数据，vue的接口请求,可以使用axios、vue-resource两种，安装axios命令： npm install --save axios vue-axios，安装vue-resource命令：cnpm install vue-resource --save，但小编使用vue-resource方式，安装完毕后还需要在main.js中配置，配置完后即可使用。

八、请求vue-resource，get请求格式是this.$http.get('Url',{params:{}}).then(function(res){},function(res){})格式，参数用关键字params，正确的内容会通过.then(function(res){}返回，异常内容会通过function(res){}返回，对于post请求格式是his.$http.get('Url',{}).then(function(res){},function(res){})。

九、vue初始函数，使用created和mounted、methods，在vue生命周期中created是在页面渲染前调用，mounted是在页面渲染后调用，methods方法用来存放vue函数。而函数都是在export default{}里面。