Vue.js -用gulp编译.vue文件

Question

我有一个Vue组件。此组件非常基本，如下所示：

my-component.vue

<template>
  <div class="foo">
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },

    props: {
      message: {
        type: String,
        default: ''
      }
    },

    methods: {
      display: function() {
        alert(this.message);
      }
    },
  };
</script>

我希望使用以下内容将其导入HTML文件：

<script type="text/javascript" src="/components/my-component.min.js"></script>

然后，我希望能够像这样使用HTML文件中的组件：

<my-component message="hello"></my-component>

这个是可能的吗？如果是这样的话，是怎么做的？我所看到的一切都使用了网络包和其他一些东西。我有一个工作部件。我只是想不出如何使它易于部署。

我创建了一个吞咽文件来帮助解决这个问题。这个看起来是这样的：

gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var webpack = require('webpack-stream');

gulp.task('default', ['build']);

gulp.task('build', [], function() {
    return gulp.src('./src/my-component')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(concat('my-component.min.js'))           
        .pipe(gulp.dest('./deploy'))
    ;
});

当我运行build任务时，我会收到一条消息，上面写着：webpack-stream - No files given; aborting compilation

令人困惑的是，我有一些成功工作的单元测试。我正在通过以下命令运行这些测试：nyc mocha-webpack --webpack-config ./webpack.config.js test --recursive --require test/.setup

我做错了什么？如何对组件进行打包，以便将其导入其他应用程序？

Answer 1

如果您不想使用任何包-一个完整的webpack包(如果您正在做一个大型项目，请重新考虑这个决定)或浏览器化(见乌伊菲)。然后，您可以使用这个包将单个文件组件编译成单个js文件，并使用gulp：

https://www.npmjs.com/package/gulp-vueify2

我必须指出，我是这个模块的作者。