Question

我正在使用Gulp，Browserify和Vueify。我可以很好地创建自定义组件。他们工作得很好。但是，如果我尝试导入/需要通过节点安装的Vue组件，事情就会中断。

例如，如果我使用npm install vue-numeric --save安装简单的Vue Numeric module，然后在我的vue文件中要求该模块并尝试将其用作组件，我在运行时遇到以下错误消息gulp编译任务（gulp vue）：

G:\file...path\node_modules\vue-numeric\src\vue-numeric.vue:1
<template>
^
ParseError: Unexpected token

所以基本上似乎没有在node_module Vue文件上运行Vueify。

我的设置：

gulpfile.js

var gulp = require('gulp');
var fs = require("fs");
var browserify = require('browserify');
var vueify = require('vueify');
var babelify = require('babelify');
var gutil = require('gulp-util');

gulp.task('vue', function() {
    browserify('./assets/vue/vue.js')
      .transform(vueify)
      .transform(babelify)
      .bundle()
      .on('error', gutil.log)
      .pipe(fs.createWriteStream("../public/js/vue.js"));
});

main.js （我的主要Vue文件）

var Vue = require('vue/dist/vue.common');

// This works perfectly with Vueify
var MyComponent = require('./components/myComponent.vue');

// Vueify doesn't seem to process this component
var VueNumeric = require('vue-numeric');

var app = new Vue({
    el: '#app',
    components: {
        MyComponent,
        VueNumeric
    }
})

myComponent.vue （只是为了告诉您Vueify正在处理我的组件）

<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

有什么想法吗？

如何使用Gulp通过Vueify运行节点VueJS模块

我的设置：

0 个答案: