2

在 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. 重新编译我的项目，以便包含我的组件

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

4

2 回答 2

3

您可以创建自己的组件/resources/assets/js/components/（或者甚至/spark-components更容易）。它可以是带有组件定义的 JS 文件（例如home.js） ，也可以是带有 HTML、CSS 和 JS 网格在一起的.vue 单个文件组件Example.vue（例如）。无论哪种方式，您都需要bootstrap.js像这样注册每个文件：

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

或者

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

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

于 2017-04-25T23:43:56.743 回答
1

我想我自己找到了这个。简短的版本是您可以使用以下任一方式构建所有资产

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 文件（所有这些都由 web-pack 在您使用时解析/编译npm run）。例如，require上面的两个语句拉入 

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

反过来，每个文件都会引入许多其他文件。PHP include/requireo-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 spark 代码的情况下删除自己的组件。除非有人在评论中以其他方式说服我，否则我会把我的放在resources/assets/js/app.js文件中——如果只是为了让它们都放在一个中心位置。

于 2017-04-25T19:16:49.300 回答