1

我正在尝试在我的第一个 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');
});

应用程序.js

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

Vue.component('chart', Chart);

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

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

图表.vue

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

<script>
</script>
4

1 回答 1

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 文件了。

于 2016-10-26T10:12:28.363 回答