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，但作为一个冰冻的穴居人开发者，我不确定。

这让我想到了我的问题 - 我如何

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

或者，换句话说，上面的内容令人难以置信的错误，我实际上还需要做其他事情吗？

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可以帮助您。

Answer 2

我想我自己跟踪了这个。简短版本是您可以使用

构建所有资产

npm run dev
npm run production

或者，使用以下任一项的npm监视模式（后者是一个轮询版本，通常对于perf / sure-to-work进行轮询权衡）

npm run watch
npm run watch-poll

更高级别 - Laravel品牌基于npm的集成。在Laravel 5.3中，这些集成称为Laravel Elixer。在Laravel 5.4中，这些集成称为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解析/编译）。例如，上面的两个require语句拉入

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

反过来，每一个都会引入很多其他文件。 PHP include/require o-rama - 为javascript重新发明！

最终，require-graph将加载以下文件

#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火花代码的情况下放置自己的组件没有好的地方。除非有人在评论中说服我，否则我会在resources/assets/js/app.js文件中删除我 - 如果只是将它们全部放在中心位置。

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

2 个答案: