vue的学习之路 vue-cli与axios

Posted 2020-12-31 wxx17513

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