Laravel Spark：创建新的设置选项卡和 Vue 组件

Question

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

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

我正在创建一个新的设置面板。我想遵循核心 laravel 代码使用的模式——但我不确定 how/where 是否可以创建我的 vue 组件。根据我收集到的信息，public 面向 Web 的应用程序在此文件中实例化了它的组件

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

这看起来不是人类可编辑的 -- 也就是说，它是由某种编译过程创建的文件。我假设那是 webpack，但作为一个冷冻穴居人开发者，我不确定。

这让我想到了我的问题——我该如何

向我的 laravel spark 项目添加一个新的组件定义
重新编译我的项目，以便包含我的组件

或者，换句话说，上面的想法非常错误，我真的需要做另一件事吗？

Answer 1

我想我自己找到了这个。简短的版本是您可以使用

构建所有资产

npm run dev
npm run production

或者，使用具有以下任一功能的 npm watch 模式（后者是轮询版本，具有 perf/sure-to-work 的通常轮询权衡）

npm run watch
npm run watch-poll

更高级别 -- Laravel 品牌其基于 npm 的集成。在 Laravel 5.3 中，这些集成称为 Laravel Elixer. In Laravel 5.4, these integrations are known as Laravel Mix。

Laravel Spark 集成（至少在 4.0 版本中）的源入口点是

#File: resources/assets/js/app.js
require('spark-bootstrap');

require('./components/bootstrap');

var app = new Vue({
    mixins: [require('spark')]
});

require 语句引入其他 javascript 文件（当您使用 npm run 时，所有这些都是 web-pack resolved/compiled）。例如，上面的两个 require 语句拉入

spark/resources/assets/js/spark-bootstrap.js
./resources/assets/js/components/bootstrap.js

其中的每一个反过来又会引入许多其他文件。 PHP include/require o-rama -- 为 javascript 重塑！

最终，需求图将加载以下文件

#File: resources/assets/js/spark-components/settings/teams/create-team.js
var base = require('settings/teams/create-team');

Vue.component('spark-create-team', {
    mixins: [base]
});

这就是 spark-create-team 组件的定义。基本方法在 require('settings/teams/create-team') 文件中定义。

#File: spark/resources/assets/js/settings/teams/create-team.js
module.exports = {
    /*...*/
}

鉴于所有这些，没有什么好地方可以在不干扰核心 laravel spark 代码的情况下放下您自己的组件。除非有人在评论中说服我，否则我将把我的放在 resources/assets/js/app.js 文件中——如果只是为了将它们全部放在一个中心位置。

Answer 2

您可以在 /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 应该可以帮助您。

Laravel Spark：创建新的设置选项卡和 Vue 组件

Laravel Spark: Creating a new Settings Tab and Vue Component

javascript

laravel

webpack

vue.js

laravel-spark