使用axios的vuejs的framework7

时间:2017-11-10 02:38:56

标签: html5 vue.js axios html-framework-7

我是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 个答案:

答案 0 :(得分:1)

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

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

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

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

2(我自己这样做)导入一次并使其全局化

这一点比较简单,一旦你不需要在所有模块中都这样做,就会这样做。

一个。导入main.js

中的axios

湾用这个

使其全球化
window.axios = axios;

在您的代码中的所有地方之后,您可以访问axios变量并可以使用它

(编辑)

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

一个。在项目文件夹

中的命令行中运行它
npm install --save axios

湾将您的导入更改为此

import Axios from 'axios'