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

Question

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

我的组件.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'))
    ;
});

当我运行构建 gulp 任务时，我收到一条消息:
webpack-stream - 没有给出文件；中止编译


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


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

Answer 1

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

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

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