vue的学习之路 vue-cli与axios

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后要重新启动

vue的学习之路 vue-cli与axios

上一篇:如何利用vw+rem进行移动端布局


下一篇:移动端弱网测试 fiddle