无法将与vue相关的npm软件包包含到我的Laravel + Vue项目中

Question

我想向mey Laravel + Vue应用程序添加漂亮的Flash消息，因此我在GitHub上找到了一个npm软件包并将其安装在我的应用程序中（npm install）

我是VueJs的初学者，我遇到一个问题：我只是不能在我的vue组件中使用该软件包，因为当我尝试包含此软件包时会抛出错误

我使用和得到的东西

：

这是我的app.js代码

window.Vue = require('vue');

/*including the package*/
import FlashMessage from '@smartweb/vue-flash-message';
Vue.use(FlashMessage);
/*including the package*/

Vue.component('settings-form',require('./components/SettingsFormComponent.vue').default);
Vue.component('profile-nav',require('./components/ProfileNavComponent.vue').default);

const app = new Vue({
    el: '#app',
});

使用代码时出现什么错误：

“ TypeError：无法读取app.js：1863处未定义的属性'flashMessage'”

当我要输出消息时，我运行此方法（ flashMessage ）：

我还尝试在我的app.js中使用此代码以包含包装：

Vue.component('FlashMessage', require('@smartweb/vue-flash-message').default);

但是它也不起作用，它引发以下错误： “无法安装组件：模板或渲染功能未定义...”

我正在尝试以这种方式使用我的组件（在ProfileNavComponent.vue中）：

 <FlashMessage></FlashMessage>

您能告诉我问题可能出在哪里吗？ 谢谢大家的帮助） 我真的很感激！

Answer 1

我是这个软件包的作者。如果您有任何问题，请将问题留在github：https://github.com/smwbtech/vue-flash-message/issues

关于您的问题，我想这是函数上下文问题。尝试将箭头函数用作.then的回调

axios.post('/api/post/', body)
  .then( res => {
    this.flashMessage(/*your message*/);
    this.data = '';/*other actions with your component data*/
  })
  .catch(e);

Answer 2

我通常使用vue软件包从软件包名称中添加它们，请尝试：

import FlashMessage from 'vue-flash-message';

当您要使用该组件时，请尝试使用FlashMessage.show()。

Answer 3

这就是我将软件包解包到项目中的方式

在app.js中，我添加了该代码：

import sys

# Add arcpy's directories to sys.path
from archook import get_arcpy
get_arcpy()

# Additional tweaks to placate arcpy
from types import ModuleType
sys.path.append('./site-packages')  # Add a dummy site-packages folder to sys.path
sys.modules['scipy'] = ModuleType('scipy')  # Add a fake scipy module to sys.modules

然后在任何我想使用flashMessages的组件中，我都使用如下代码：

import FlashMessage from '@smartweb/vue-flash-message';
Vue.use(FlashMessage, {tag: 'flash-message', strategy: 'multiple'});

非常感谢所有想帮助我的人！