Laravel using Vueify

Laravel using Vueify

本文关键字：Vueify using Laravel      更新时间：2023-09-26

我试图在我的第一个Laravel项目中使用Vueify，我不确定为什么它不工作。我已经安装了(通过npm) vueify和larael -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文件，这样我只需要加载那些相关的每个页面。但我真的不确定这是不是错误的做法。什么好主意吗?我四处寻找答案，但似乎没有什么对我有帮助。

只是为了测试我的图表。Vue文件看起来像这样。

Chart.vue 

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

假设你使用的是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文件。

相关文章：