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

Posted 2023-02-23

【中文标题】无法将 vue 相关的 npm 包包含到我的 Laravel + Vue 项目中

【英文标题】：Can't include vue related npm package to my Laravel + Vue project

【发布时间】：2019-09-12 12:07:48

【问题描述】：

我想在我的 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: Cannot read property 'flashMessage' of undefined at app.js:1863”

当我想输出消息时，我运行这个方法（flashMessage）：

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

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

但它也不起作用，它会抛出这个错误： “未能挂载组件：模板或渲染函数未定义...”

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

 <FlashMessage></FlashMessage>

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

【参考方案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);

【参考方案2】：

我通常使用vue包从包名中添加它们，试试：

import FlashMessage from 'vue-flash-message';

而当你想使用组件时，尝试使用FlashMessage.show()。

【参考方案3】：

这就是我将包取消包含到我的项目中的方式

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

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

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

  this.flashMessage.success(
   title: 'New Friend!',
   message: data.user_created_by.full_name + ' started chatting with you!',
   time: 5000,
   blockClass: 'image-uploaded-flash',
 );

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