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

我有一个Vue组件。这个组件是非常基本的，看起来像这样：Vue.js - 用gulp编译.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')) 
    ; 
});

当我运行构建一饮而尽任务，我收到一条消息，说： webpack-stream - No files given; aborting compilation

混乱的部分是，我有一些单元测试成功工作。我通过这个命令运行这些测试： nyc mocha-webpack --webpack-config ./webpack.config.js test --recursive --require test/.setup

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

来源

2017-06-12 user687554

你能不能也请与我们分享你的Webpack配置？ – Kano

如果你不想使用任何包 - 一个完整的webpack包（如果你正在开发一个大项目，请重新考虑这个决定）或者browserify（见vueify）......然后你可以使用这个包编译单个文件组件到单一的js文件，与一饮而尽：

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

不得不提的是，我这个模块的作者。

来源

2017-06-13 08:09:54 Cobaltway

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

回答

相关问题