signed

QiShunwang

“诚信为本、客户至上”

vue的创建问题和axios问题

2021/3/21 9:45:56   来源:

文章思路来源于网络以及自己的尝试和理解
问题1:使用命令行打开脚手架 vue ui来创建项目时,各项配置完成后,在最后选择创建时出现错误Cannot set property ‘context‘ of null
原因可能是你选择建立的工程在其他的vue工程下,这些工程可能是你之前使用vue init webpack xxx建立而成,并且所在目录有下载的node_modules之类的。
解决方法是,自己使用vue ui脚手架创建项目时,选择专门用于vue ui目录,比如上面那些使用vue init webpack xxx创建项目统一在projects_a文件夹下,那么使用脚手架vue ui 创建的项目,则选择在projects_b的目录下创建。
即总的来说,两个工作空间,分别用来放置以上两种不同创建方式的项目

问题2:[Vue warn]: Error in created hook: "ReferenceError: axios is not defined
这本质上是全局变量问题,在axios已下载的情况下,main.js中引入axios,
自己写vue文件中调用axios时,要发现main.js的中的axios那么,必须借助vue的全局变量

main.js中代码

// 引入axios,并将axios赋值给Vue的prototype的自定义格式参数$axios,
// 这样可以防止在 xx.vue文件中调用axios出现 axios未定义错误,
// 调用方法是在<script>中的export default{}的creat(){}函数中使用this.$axios,
// 其原理就是全局变量
import axios from 'axios' // 从下载在项目中的axios引入,给当前main.js使用
Vue.prototype.$axios = axios //设置全局变量的格式( Vue.prototype.$自定义变量名 = 值)

xx.vue中的代码:

  //初始化操作   create () {}
  created () {
    //发起请求
    //axios.get代表 get请求URL(后端中设置的URL), then 代表回调, resp代表响应体
    const _this = this; //此时的this是vue对象,保存一下这个vue对象,免得在下面的axios函数里面丢失
    //在main.js中引入了axios并配置给了vue,所以这里使用this.$axios
    this.$axios.get('http://localhost:8181/book/findAll/').then(function (resp) {
    //这里的this不在是上面的vue对象,所以需要使用上面保存过的_this来替代
      _this.books=resp.data;
    })
  }