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文件

回答

相關問題