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文件。我不确定这对于使用长生不老药是好还是坏。但是，如果理想情况下这不是一个糟糕的方法我想将。/resources/assets/js/components/中的.vue文件导入到那些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"
  }
}

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

Laravel使用Vueify

1 个答案: