未定义vue实例的全局变量

时间:2018-03-17 01:52:57

标签: javascript laravel-5 webpack vue.js

我在app.js中定义了这样的Vue.js实例:

const vm = new Vue({
    el: '#app',
    data: {
        page: 'welcome'
    }
});

并使用Laravel的默认webpack脚本:

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

Vue在组件显示时正确加载,Vue开发人员插件显示适当的数据。

但是,在开发人员控制台和页面上的脚本中vm未定义 例如,在加载Vue组件的页面上

<script>
  console.log(vm); // Error: vm is not defined.
</script>

如何访问Vue实例?我想设置一个数据属性。

2 个答案:

答案 0 :(得分:3)

要具有灵活性并使用任何名称导入,您可以使用默认导出。

app.js

export default new Vue({
    el: '#app',
    data: {
        page: 'welcome'
    }
});

其他.js 文件中:

import whateverName from './app';

当然,根据文件的位置调整./app

答案 1 :(得分:2)

我能够使用

export {
  vm
};

require('./main');

并在main.js

import {vm} from './app';