javascript - Laravel Spark : Creating a new Settings Tab and Vue Component

Question

在 Laravel Spark 中，大多数设置面板都有相应的 Vue JS 组件，通过自定义选项卡调用

<spark-create-tests :user="user" inline-template>
    <div>
    </div>
</spark-create-tests>

我正在创建一个新的设置面板。我想遵循 Laravel 核心代码使用的模式——但我不确定如何/在哪里创建我的 vue 组件。据我所知，面向公众的 Web 应用程序在此文件中实例化其组件

#File: public/js/app.js
Vue.component('spark-create-team', {
    mixins: [base]
});

这看起来像是人类不可编辑的——也就是说，它是通过某种编译过程创建的文件。我认为那是 webpack，但作为一个卡住的穴居人开发人员，我不确定。

这让我想到了我的问题——我该怎么做

1. 向我的 Laravel Spark 项目添加新的组件定义
2. 重新编译我的项目，以便包含我的组件

或者，上面的内容是非常错误的，我实际上需要做另一件事？

Answer 1

您可以在 /resources/assets/js/components/ 中创建自己的组件(如果更容易的话，甚至可以在 /spark-components 中)。它可以是带有组件定义的 JS 文件(例如 home.js)或 .vue single file components HTML、CSS 和 JS 融合在一起(如 Example.vue)。无论哪种方式，您都需要在 bootstrap.js 中注册每个文件，如下所示:

require('./home'); // home.js -> <home>

或

Vue.component('example', require('./Example.vue')); // Example.vue -> <example>

当然，如果您将该文件包含在 /components 下的子目录中，则需要调整路径。当您执行 npm run dev 时，/resources 下的所有 JS 资源通常都会编译成一个文件 - app.js，但您可以从您的 webpack.min.js 文件中控制此行为。 Laravel Docs如果需要的话应该会帮助你。