Laravel Elixir Browserify Failed !: Неожиданный токен - с помощью VueJs

Question

может кто-нибудь помочь мне решить эту проблему? Я пытаюсь узнать, как использовать elixir.browserify + vue.js Laravel, но я не могу сделать эту работу! Я получаю эту ошибку:

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 установить его, как я?

package.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" 
    } 
} 

gulpfile.js

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

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

main.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) в котором говорится есть несколько строк, которые я должен добавить в моем глотком файл

В принципе мне нужно это:

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'); 
}); 

Я уже был совместим с vueify:/Я надеюсь, что это поможет кому угодно. Извините за то, что кто-то пытался помочь мне тратить время.

Answer 2

Похоже, вы смешиваете свои шаблоны и свой Javascript-код.

В main.js, вы делаете это:

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

require предназначен для импорта Javascript модулей, поэтому код в одном модуле может быть использован в другом. components/skills.vue не является файлом Javascript, это HTML. Поэтому интерпретатор Javascript задыхается.

Вам необходимо переписать skills.vue, чтобы открыть Javascript. HTML должен (вероятно) быть перемещен в шаблон клинка - я говорю, вероятно, потому что, похоже, вы можете использовать систему шаблонов Javascript с Vue, с которой у меня нет большого опыта (и я не вижу любые доказательства в коде, который вы опубликовали).

EDIT

Я никогда не использовал vueify раньше, но я думаю, что есть что-то не хватает в вашем gulpfile.js, что необходимо настроить vueify.

Например, я пишу Coffeescript вместо Javascript и использую elixir, чтобы обозревать мой Coffeescript. Для того, чтобы получить эту работу правильно, я должен был добавить конфигурацию к моему gulpfile:

// add the coffeeify transform to the browserify stack 
// 
elixir.config.js.browserify.transformers.push({ 
    name: 'coffeeify', 
    options: {} 
}); 

// configure browserify to recognize the .coffee extension 
// 
elixir.config.js.browserify.options.extensions = ['.coffee']; 

elixir(function(mix) { ... }); 

Я предполагаю, что вам нужно сделать что-то вроде моего первого элемента конфигурации выше:

elixir.config.js.browserify.transformers.push({ 
    name: 'vueify', 
    options: {} 
}); 

Это будет поручить браузеру добавить vueify в его стек преобразований.

Вы также, возможно, потребуется второй вариант:

elixir.config.js.browserify.options.extensions = ['.vue']; 

Но я не уверен в этом. В моей системе добавление расширения .coffee позволяет мне ссылаться на модули без расширения .coffee в моем коде. Кажется, вы этого не делаете.

Надеюсь, что это поможет!

Answer 3

Я знаю, что это уже так давно, но этот блок кода в вашем файле package.json будет правильно его компилировать.

"browserify": { 
    "transform": [ 
     "vueify", 
     "babelify" 
    ] 
    }, 

Теперь вы можете снова запустить gulp