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

Question

我有一个 Vue 组件。这个组件非常基础，看起来像这样：

我的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>

这可能吗？如果是这样，如何？我看到的所有东西都使用 web pack 和一堆其他东西。我有一个工作组件。我只是不知道如何使它易于部署。

我创建了一个 gulpfile 来帮助解决这个问题。这看起来像这样：

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 gulp 任务时，我收到一条消息： webpack-stream - No files given; aborting compilation

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

我究竟做错了什么？如何打包我的组件以便我可以将它导入到其他应用程序中？

Answer 1

如果你不想使用任何包——一个完整的 webpack 包（如果你正在做一个大项目，请重新考虑这个决定）或者browserify（见vueify）......那么你可以使用这个包将单个文件组件编译成单个 js 文件，使用 gulp：

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

我必须提到我是这个模块的作者。