php - Laravel Elixir Browserify 失败! : Unexpected token - Using VueJs

Question

谁能帮我解决这个问题？我正在尝试学习如何使用 Laravel 的 elixir.browserify + vue.js，但我做不到!我收到此错误:

gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

D:\xampp\htdocs\pwebdev-project\resources\assets\js\components\skills.vue:1
<template>
^
ParseError: Unexpected token

知道可能是什么问题吗？我需要在这里指定我想使用 vueify 的地方还是我只需要像我一样 npm 安装它？

包.json

{
  "private": true,
  "devDependencies": {
    "babel-runtime": "^6.3.13",
    "gulp": "^3.8.8",
    "vue-hot-reload-api": "^1.2.2",
    "vueify": "^7.0.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.5.0",
    "jquery": "^2.1.4",
    "laravel-elixir": "^4.0.0",
    "vue": "^1.0.11",
    "vue-resource": "^0.1.17"
  }
 }

gulp文件.js

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

elixir(function(mix) {
    mix.browserify('main.js');
});

主要.js

var Vue = require('vue')
var Skills = require('./components/skills.vue')

new Vue({
    el: '#app',
    components: {
        'skills' : Skills
    }
})

和/components/skills.vue

<template>
    <div>
        <select v-model="skills_array" class="form-control" multiple>
            <option v-for="skill in list" value="@{{skill.id }}" >
                @{{ skill.name }}
            </option>
        </select>
        <input type="text" name="skills" hidden v-model="skills_array">
    </div>
</template>

<script>
    export default {
        created: function () {
            var data = [];
            for (var i = 0; i < this.list.length; i++) {
                data.push({
                    'id': this.list[i].id,
                    'name': this.list[i].name,
                    'selected': false
                });
            }

            this.list = data;
            this.skills_array = [];
        },
        props: ['list', 'skills_array']
    }
</script>

Answer 1

环顾四周后我找到了this repo (JeffreyWay)其中指出我需要在我的 gulp 文件中添加一些行

基本上我需要这个:

npm install laravel-elixir-vueify

然后在我的 gulpfile 中:

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

require('laravel-elixir-vueify');  ---> this line was missing

elixir(function(mix) {
    mix.browserify('main.js');
});

我认为 elixir 已经与 vueify 兼容:/我希望这对任何人都有帮助。很抱歉让任何试图帮助我的人浪费了您的时间。