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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-Vue.js-使用gulp编译.vue文件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1618字，纯文字阅读大概需要3分钟。

内容图文

我有一个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>

这可能吗？如果是这样,怎么办？我看到的所有内容都使用了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-未提供文件；中止编译

令人困惑的部分是,我有一些可以成功运行的单元测试.我正在通过以下命令运行这些测试：

nyc mocha-webpack –webpack-config ./webpack.config.js test –recursive –require test / .setup

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

解决方法:

如果您不想使用任何捆绑软件-完整的webpack捆绑软件(如果您正在处理大型项目,请重新考虑此决定),也不要使用browserify(请参见vueify)…那么您可以使用此软件包将单个文件组件编译为单个js文件,且带有gulp：

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

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

内容总结

以上是互联网集市为您收集整理的javascript-Vue.js-使用gulp编译.vue文件全部内容，希望文章能够帮你解决javascript-Vue.js-使用gulp编译.vue文件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---