使用Vueify的Laravel

Question

我正试图在我的第一个Laravel项目中使用Vueify，我不知道为什么它不起作用。我已经安装了(通过npm) vueify和laravel-灵丹妙药-vueify模块。

gulpfile.js

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');

elixir(function(mix) {
  mix.scripts([
    'vendor/vue.min.js',
    'vendor/vue-resource.min.js'
  ], 'public/js/vendor.js')
    .sass('app.scss')
    .webpack('app.js');
});

app.js

import Vue from 'Vue';
import Chart from './components/Chart.vue';

Vue.component('chart', Chart);

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

只为了测试我的Chart.vue文件，如下所示。

Chart.vue

<template id="learnometer-chart">
  <div id="myPieChart" style="width:1000px; height:1000px; background-color:red;"></div>
</template>

<script>
</script>

Answer 1

假设您使用的是Laravel5.3和Vue 2.0，现在可以使用webpack进行编译。

gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir(function(mix) {
    mix.webpack('app.js');
}

在resources/assets/js/app.js上注册组件

require('./bootstrap');

Vue.component(
    'chart',
    require('./components/Chart.vue')
);

const app = new Vue({
    el: '#app'
});

您的组件应该在resources/assets/js/components中。

package.json应该类似于：

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  }
}

当您有此功能时，如果您在Windows上，请运行npm install或npm install --no-bin-links。现在您可以运行gulp来编译vue文件。