Laravel 使用 Vueify

Question

我正在尝试在我的第一个 Laravel 项目中使用 Vueify，但我不确定它为什么不起作用。我已经（通过 npm）安装了 vueify 和 laravel-elixir-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/ 下都有自己的 .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

假设你使用的是Laravel 5.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"
  }
}

当你有这个时，运行 npm install 或 npm install --no-bin-links 如果你在 Windows。现在你可以运行 gulp编译你的vue文件了

Laravel 使用 Vueify

Laravel using Vueify

javascript

laravel

import

vue.js

vueify