Gulp - Compiling Vue Component Without `require`
I'm trying to understand how to build a component with Gulp. At this time, I have a Vue component that looks like this: my-component.vue
Solution 1:
Okay I did find something without the need of any require module. That's a bit ugly so you may not like it.
Step 1:
Extract CSS in gulpfile.js.
const gulp = require('gulp');
const vueify = require('gulp-vueify2');
gulp.task('default', ['build']);
gulp.task('build', function() {
return gulp.src('./src/my-component.vue')
.pipe(vueify({
extractCSS: true,
CSSOut: './deploy/bundle.css'
}))
.pipe(gulp.dest('./deploy'))
;
});
Step 2: Your component, my-component.vue.
<template><divclass="foo">
World
</div></template><script>module.exports = {
data() {
return {};
},
props: {
message: {
type: String,
default: ''
}
}
};
// Well, hu, you have no module so just keep your component somewhere.window.vueComponents['my-component'] = module.exports;
</script><style>.foo {
color: red;
}
</style>Step 3: The index.html.
<html><head><linkrel="stylesheet"type="text/css"href="/bundle.css"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script><script>window.module = {}; // Yeah just avoid the error as you have no modulewindow.vueComponents = {}; // Global register of your components...</script><scriptsrc="./my-component.js"></script></head><body><divid="app"><div>
{{ foo }}
<my-component></my-component></div></div><script>newVue({
// Here you give your component to your vue instancecomponents: window.vueComponents,
data() {
return {
foo: 'Hello'
};
},
el: '#app'
});
</script></body></html>
Post a Comment for "Gulp - Compiling Vue Component Without `require`"