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>

这可能吗？如果是这样，怎么样？我看到的一切都使用了网络包和其他一些东西。我有一个工作组件。我无法弄清楚如何使其易于部署。

我创建了一个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捆绑包（如果你正在开展一个大项目，请重新考虑这个决定），也不要浏览浏览器（参见vueify）...那么你可以使用这个package将单个文件组件编译成单个js文件，使用gulp：

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

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

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

1 个答案: