Vue + Spring Boot 项目实战（二）笔记

前端页面开发

设置反向代理

原教程代码：

import Vue from 'vue'
import App from './App'
import router from './router'
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

新版代码：

import Vue from "vue";
import router from './router'
import App from "./App";
import axios from "axios"

axios.defaults.baseURL='http://localhost:8443/api'
Vue.prototype.$axios=axios
Vue.config.productionTip=false

new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

首先是要通过npm安装axios，然后就可以直接import

Vue.prototype.$axios=axios

Vue.prototype.$axios=axios这么写的原因是为了让所有组件都可以使用axios，但又不会污染全局作用域，以$开头则只是规范，为了与组件中定义的数据、方法、计算属性区分开。

例如：

Vue.prototype.appName = 'My App'

new Vue({
  data: {
    // 啊哦，`appName` *也*是一个我们定义的实例 property 名！