1、搭建一个vue-cli搭建一个项目
(1) 安装vue-cli
npm install vue-cli -g
(2) vue init webpack 项目名
根据需要选择设置
(3) npm install
安装配置(安装配置时留意一下当前位置是不是在项目里,不然会报错:找不到配置文件package.json)
(4) npm run dev
本地运行
2、用axios与后端进行数据传递
(1) 安装axios
npm install axios
(2) 在main.js中引入axios
import axios form ‘axios‘
(3) 将axios挂在到vue.prototype.$http
Vue.prototype.$http = axios;
(4) 在config/index.js中修改配置,定义全局变量、设置跨域状态
dev: {
// Paths
assetsSubDirectory: ‘static‘,
assetsPublicPath: ‘/‘,
proxyTable: {
‘/api‘: {
target: ‘https://www.baidu.com/public‘,
changeOrigin: true, // 在本地会创建一个虚拟服务端,服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
‘^/api‘: ‘‘ //替换targe中的请求地址
}
}
},
(5)访问接口
this.$http.post(‘/api/login‘,
{
name: "admin",
password: "123456"
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
(6)配置好index.js后要重新启动