VUE环境搭建
vue
下载安装node
下载安装node之后，配置环境变量，打开docs管理工具，先看看node安装成功了没有，输入 node -v ，回车，会输出node的版本号
安装淘宝镜像
由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
安装全局vue-cli脚手架
输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；
搭建项目
进入E:\java.vue下
创建新的项目输入命令：vue init webpack cjq 回车，cjq是我自己的文件夹的名字，是基于webpack的项目，输入之后就一直回车，直到出现是否要安装vue-route，
这个我们在项目要用到，所以就输入y 回车
安装element组件
npm install element-ui -save
这样的话Element组件就被安装到了Project里，打开main.js文件，在其中加入：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
安装依赖
进入文件夹，输入： cd cjq 回车，因为各个模板之间都是相互依赖的，安装依赖，输入命令：cnpm install
运行项目
安装好之后，在命令行输入：cnpm run dev 回车即可，8080是默认的端口，直接在浏览器输入localhost:8080；
前后端分离
SpringBoot与vue 进行前后端分离，主要有这么两种方式：
⑴ 利用vue项目 打包（npm run build命令）出来的dist文件夹拷贝到springboot项目的static 文件目录。
⑵ 利用 nginx 的反向代理，不用将dist目录拷贝到static文件目录下。
vue访问接口
已过时:
1.安装vue-resource到项目中，找到当前项目
输入：npm install vue-resource --save
2.安装完毕后，在main.js中导入
import VueResource from 'vue-resource'
Vue.use(VueResource)
3.在vue文件中使用http方法
axios:
vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。
功能特性
1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 CSRF/XSRF 攻击
安装 axios
$ npm install axios
在要使用的文件中引入axios
import axios from 'axios'
var param = new FormData() // 创建form对象 param.append('account', this.user.account) param.append('password', this.user.password) this.$http.post(this.url,param) .then(response=>{ //接口返回数据 this.message=response.data.message; this.status=response.data.status; if(this.status === true){ this.logining = false; sessionStorage.setItem('user', this.user.account); this.$router.push({path: '/Home'}); }else{ this.logining = false; this.$alert(this.message, 'error', { confirmButtonText: 'ok' }) } },function(error){ console.log('error submit!'); return false; })
编译缺少MODEL
npm run build编译时如出现缺少模块时，下载即可
如:
Module not found: Error: Can't resolve 'babel-polyfill' in 'E:\java.vue\vueDemo\src'
@ ./src/main.js 11:0-24
解决方法是在控制台输入命令“npm install babel-loader --save"。
