如何在 Laravel 中使用 Vue.js 插件和组件

Question

我正在使用 Vue.js（在 Laravel 框架内），而且我都是新手。 我正在尝试了解有关我尝试使用的某些代码的一些基本想法：

应用程序.js：

import Vue from 'vue';
import Toasted from 'vue-toasted';
Vue.component('toast-alert', require('./components/ToastAlert.vue'));
Vue.use(Toasted);

ToastAlert.vue:

<template>

</template>

<script>
export default {
  
    props: {
        
    },
    mounted() {
        this.showToast()
    },
    data() {
        return {
            message: 'Status Update',
        }
    },
    methods: {
        showToast() {
            this.$toasted.show(this.message, {
                duration: 3000
            });

        }
    }
}
</script>

问题：

1. 我知道import告诉脚本我们需要引入某些节点模块，但我不完全理解use()的用途。 我已阅读文档以了解您对插件所做的事情（ https://v2.vuejs.org/v2/guide/plugins.html ），但并没有真正了解更多。

2. 再次从文档中，我看到在注册 Vue 组件时，第二个参数是选项列表，即：模板、道具、方法等。我对require的作用以及它如何翻译 vue 文件有点困惑（由标签和导出对象的标签组成）成符合 Vue.component 标准的最终对象。

Answer 1

1) 在 Vue 中，调用 Vue.use(Plugin, Options) 使插件在整个应用程序中可用。 它基本上是一种引导插件的方法，即 Vue-Toasted，因此您可以在整个应用程序中使用它。 您也可以在此处定义配置选项。

2) Vue.component 用于在应用程序中注册（你自己的）组件。 它允许它们在其他组件中使用，而无需在每个文件中定义它们。 将 app.js 文件视为引导文件，它定义了所有的插件、组件等，并注册它们以在 Vue 中使用。 require 正在导入文件，而 Vue 正在解析模板和对象。 请注意，这都是在 webpack 中编译的，无法按原样加载到浏览器中。