使用 axios 的带有 vuejs 的 framework7

Posted 2023-02-22

【中文标题】使用 axios 的带有 vuejs 的 framework7

【英文标题】：framework7 with vuejs using axios

【发布时间】：2018-04-23 05:08:32

【问题描述】：

我是 framework7 和 vuejs 的新手。这是导入它的正确方法吗？在此之后，我如何从其他页面引用 axios？

下面是我的 main.js，我不确定它是否正确导入，还是我遗漏了一些步骤？

// Import Vue
import Vue from 'vue'

// Import F7
import Framework7 from 'framework7'

// Import F7 Vue Plugin
import Framework7Vue from 'framework7-vue'

// Import Routes
import Routes from './routes.js'

// Import Vue Resource for http .... not recommended anymore
//import VueResource from './vue-resource.js'

//http requests and other stuff
import Axios from './axios.min.js'

// Import App Component
import App from './app.vue'

// Init F7 Vue Plugin
Vue.use(Framework7Vue)

// Init App
new Vue(
  el: '#app',
  template: '<app/>',
  // Init Framework7 by passing parameters here
  framework7: 
    root: '#app',
    /* Uncomment to enable Material theme: */
    // material: true,
    routes: Routes
  ,
  // Register App Component
  components: 
    app: App
  ,
  //methods
  methods: 

    getAppName: function () 
      console.log(this.appName)
    ,

    msgBox: function () 
      alert('Message Box');
    ,

    calNum: function () 
      alert(3 + 5);
    

  

);

【参考方案1】：

有两种主要方法可以做到这一点。

1（首选）在使用它的任何模块中导入 axios

标准方法是在任何需要它的模块中导入 axios。例如在test.vue

<script>
import axios from 'axios';
export default 
    mounted: function() 
        axios.get(....)

2（我自己做）导入一次并使其全局化

这更简单，只需执行一次即可，无需在所有模块中每次都执行。

一个。在main.js中导入axios

b.让它全球化

window.axios = axios;

在代码中任何地方的这一行之后，您都可以访问 axios 变量并可以使用它

（编辑）

实际上我现在看到你从文件中导入 axios。最好用 npm 来做。

一个。在项目文件夹的命令行中运行它

npm install --save axios

b.将您的导入更改为此

import Axios from 'axios'

【讨论】：

如果这解决了您的问题，您可以将其标记为答案吗？