main.js 中的 Vue 是怎么来的?

main.js

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import axios from "axios";

createApp(App).mount("#app");

Vue.prototype.$axios = axios;

为什么这个 Vue 可以直接使用,不需要定义、或者导入?

代码出处:vue中如何发起请求

图片.png

阅读 1.2k
1 个回答

是需要引入的, 不然会报错没有Vue, createApp是Vue3的, axios这里的是vue2的使用方式, 既然你在项目中用来createApp就不需要如你发的图片中那样了, 可以这样
main.js中:

const app = createApp(App)

/* 挂载全局对象 start */
app.config.globalProperties.$http = Axios
/* 挂载全局对象 end */

app.use(router).use(store);
app.mount('#app')

在vue3的setup中使用getCurrentInstanceAPI获取全局对象
组件中:

<template>
  <div class="box"></div>
</template>
<script>
  import { ref, reactive, getCurrentInstance } from 'vue'
  export default {
    setup(props, cxt) {
      // 方法一 start
      const currentInstance = getCurrentInstance()
      const { $http, $message, $route } = currentInstance.appContext.config.globalProperties
      
      function getList() {
        $http({
          url: '/api/v1/posts/list'
        }).then(res=>{
          let { data } = res.data
          console.log(data)
        })
      }
      // 方法一 end

      // 方法二 start
      const { proxy } = getCurrentInstance()
      
      function getData() {
        proxy.$http({
          url: '/api/v1/posts/list'
        }).then(res=>{
          let { data } = res.data
          console.log(data)
        })
      }
      // 方法二 end

    }  
  }
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题