Gulp을 사용하여 Vueify를 통해 노드 VueJS 모듈을 실행하는 방법

Gulp을 사용하여 Vueify를 통해 노드 VueJS 모듈을 실행하는 방법

나는 Gulp, Browserify, Vueify를 사용하고 있다.나는 사용자 정의 구성요소를 잘 만들 수 있다.그들은 아주 잘한다.하지만 노드를 통해 설치된 Vue 구성 요소를 가져오거나 요청하면 문제가 발생함

예를 들어 다음과 같은 간단한 Vue Numeric 모듈을 설치하는 경우npm install vue-numeric --save그런 다음 vue 파일에 해당 모듈을 요구하여 구성 요소로 사용하려고 하면, 꿀벌 컴파일 작업을 실행할 때 다음과 같은 오류 메시지가 표시됨(gulp vue):

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

그래서 기본적으로 부에이파이(Vueifi)가 운영되지 않는 것 같다.node_moduleVue 파일.

내 설정:

gulpfile.js.s.

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>

좋은 생각 있어?

참조URL: https://stackoverflow.com/questions/42909660/how-to-run-node-vuejs-modules-through-vueify-using-gulp