如何像 Vue-Hackernews 示例一样使用 Elixir + Vueify？

他们在package.json中使用类似这样的命令

但我不知道如何将它与 Laravel Elixir 一起使用

样本

基于 Vuejs 文档示例，我正在尝试做一个简单的树视图组件，我可以在其中显示会计科目表而无需任何交互（不添加不拖放......真的很简单）。

我在 FiddleJs 上做了一个例子，但我的例子工作得很好......我不知道为什么在我的应用程序上我不能让它工作！我不知道这是否是一些 Vueify 问题......也许你可以帮助我！

有我的代码：

OzChartTree.vue

我第一次调用树视图组件的地方

问题是当我递归调用 ja .vue 文件上的组件时。

如上所述，我收到以下错误：

app.js:23536 [Vue 警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

但是它被正确注册为 OzTree！我无法理解！

有人知道吗？

我一直致力于使用 Vueify 将 vue.js 组件从 vue 1.0 移植到 Vue 2.0。在Starter 资源中，它指出：

当你使用 vue-loader 或 vueify 导入 *.vue 文件时，它们的部分会自动编译成渲染函数。因此建议使用带有 *.vue 文件的运行时构建。

然而，情况似乎并非如此。如果我有一个简单的组件，例如：

在我的main.js文件中，我这样做：

然后使用 Gulp 编译：

除了让它渲染之外，我无法对组件做任何事情。实际上，它会在找到 id 为“app”的 div 后立即渲染组件：

并且不会收到添加到组件中的任何道具，因此：

同样，如果我添加data到main.js，则无法从网页访问：

在 HTML 中：

并且“#app”中的任何内容都不会呈现（记住“my-component”即使我不添加它也会呈现）：

因此，在我看来，您可以渲染一个组件，而无需对其进行任何控制，并且您无法对视图模型做任何进一步的事情，那么我真的应该按照建议使用仅运行时构建吗？

最后，我使用aliasify使用了独立构建，一切正常，但我真的很想知道在运行时构建中使用vueify时我缺少什么。当然，我所描述的行为不是应该发生的，所以我只能假设我在某个地方误解了某些东西。

我正在尝试在我的第一个 Laravel 项目中使用 Vueify，但我不确定它为什么不起作用。我已经（通过 npm）安装了 vueify 和 laravel-elixir-vueify 模块。

gulpfile.js

应用程序.js

我的控制台给了我错误：Unknown custom element: <chart>关于什么不起作用或我错过了什么的任何想法？我对我需要安装什么或如何包含东西感到有点困惑。我还有一些页面，每个页面都有自己的 .js 文件/public/js/。我不确定这对于使用长生不老药来说是好是坏。但是，如果理想情况下这不是一个坏方法，我想将 .vue 文件导入/resources/assets/js/components/到那些 js 文件中，这样我只需要加载与每个页面相关的文件。但我真的不确定这是否是错误的做法。有任何想法吗？我四处寻找答案，但似乎没有任何帮助。

只是为了测试我的 Chart.vue 文件看起来像这样。

图表.vue

我正在使用带有 browserify 和 vueify 的简单 vue.js 设置。

按照之前的指导，我还添加了别名作为依赖项，以便使用模板引擎。这是我的 package.json 文件：

使用这样的简单视图模型设置，我可以看到引擎工作：

html文档如下：

但是，如果我尝试使用 .vue 文件和渲染函数，它就不起作用：

还有修改后的 index.js 文件：

然后它给了我以下输出：

解析文件 /home/sombriks/git/simple-vueify-setup/app.vue: 'import' 和 'export' 可能只出现在顶层 (15:0)

欢迎任何帮助。

完整的示例代码可以在这里找到。

固定的。

解决方案是：

1. .transform(babelify)也通过
2. 确保您的所有.vue-file 脚本元素看起来像<script type="text/javascript">- type属性必须位于自定义属性之前，lang 属性.. 可能是第一个，甚至是标签上的唯一属性。

我认为我的问题是我的 vue 中有 es6。我正进入（状态：

该错误并没有真正告诉我它来自哪里（我的理解是它来自browserify），但如果我对公共脚本进行空操作，其余的构建工作。这是那个脚本：

这基本上是从 vueify 的 readme.MD 中复制的。它的依赖public/styles确实有效。

所以，我想，让我们尝试手动编译它们。我确保我有 babel-core 和 babel-preset-latest。然后：构建文件：

.babelrc

{ "presets": ["latest"]}

vue.config.js

这基本上直接来自 readme.MD，但对于 es6。

然后我将我的 vues 更改为具有该标签，例如：

问题是，我仍然遇到同样的错误。我究竟做错了什么？

回应附录

如果我按照下面的建议vue，在处理我的主 js 文件时，我的 import 语句会出错demo.js。

package.json 的开发部门

几乎固定。

在帮助下，我得到了 babelify 而不是在 vues 上窒息。这实际上非常晦涩但很简单，只需去掉lang属性并添加type="text/javascript"到每个脚本标签。（不能只添加该类型规范，它必须是脚本元素中的第一个标记）。

它几乎可以工作。现在我得到：

那不是主要的js文件！在里面routes.js

我主要有：

这两项工作。

在我有的路线中：

即使文件在那里，这也不起作用。

答对了

好的，所以我实际上将文件命名为“Home..vue”:)

我正在构建一个在多个内容页面中使用 Vuejs 的 Chrome 扩展，我很难配置 gulpfile，因为我无法在 main.js 中引用文件。问题是它无法找到./app.vue好像没有定义位置一样。

这是我的配置

我正在寻找资源来找到一种解决方案来构建一个监视 vue 变化并应用转换的任务。我已经在 webpack 上构建了我的应用程序，但由于客户端更改，我必须使其与 gulp 一起使用。

Current Version : Laravel 5.2 using only Browserify not Webpack

I've already set up everything such as like this:

In my resources/js/app.js

in my view :

But when i try to refresh it. The DOM just renders for about 2ms or let's say split second then it's gone and there's an error that says :

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in )

我已经在我的工作流程中使用了 gulp，我目前没有使用 webpack 或 browserify，但是编译 Vue 2.x 组件似乎需要其中一个，没有主动维护的机制可以将 Vue 组件直接编译为 gulp 任务.

我已经搜索过，似乎找不到工作参考来简单地将带有*.vue组件的目录编译成单个 JavaScript 文件，然后我可以从我的页面链接该文件。我只想创建和使用一些组件，而不是创建 SPA。

这是我所拥有的：

gulpfile.js

vuecomponents.js

app.vue 文件与此处的示例相同。我无意真正拥有一个“应用程序”组件，我只是想获得一个示例，我会用我的单文件组件列表替换它。

结果如下：

我难住了。我认为browserify 正在尝试在编译之前解析原始 vue 代码，但同样，我是 browserify 的新手。

我正在尝试使用 Karma 运行我的单元测试。我有calendar.tests.js一个看起来很像这样的文件：

当我使用 Karma 运行此测试时，我得到以下信息：TypeError: (0 , _index.handleSelectDay) is not a function is not a function

我的 karma.conf.js 看起来像：

如何让 Karma 与 VueJS 单文件组件配合使用？