I like the idea of Vue, and I want to use it. I've tried getting a "flow" together a few times, but even when I was able to shake the right voodoo rattle, I hadn't been able to get a flow that worked consistently and didn't make me want to bash my computer and try making money as a basket weaver. Until now. Hopefully it'll last for more than a few weeks...
The Requirements
WARNING: I'm sure this setup will only work for specific versions of any of these packages. Installing the latest of each of these gives tons of warnings about deprecated packages, etc, which makes me afraid of deploying it in a production environment. Again, a topic for a different post.
Package.json
I've gone through a TON of tutorials trying to get this to work. With these specific versions of each package, I have this working on my machine. Because client side bundling, transpilation, etc is soo darn fragile, I can't guarantee that this will work on your machine.
//NOTE: Dependencies marked with // * might not be needed
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"browserify": "^14.4.0",
"fs": "0.0.1-security",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1", // *
"gulp-cssmin": "^0.2.0", // *
"gulp-sourcemaps": "^2.6.1", // *
"gulp-uglify": "^3.0.0", // *
"gulp-webserver": "^0.9.1", // *
"pug": "^2.0.0-rc.4",
"vue": "^2.4.4",
"vueify": "^9.4.1",
"vueify-insert-css": "^1.0.0" // *
},
Folder Structure
I know this isn't a typical folder layout, but bear with me. I'm keeping it simple to help eliminate issues relating to path. Because most modules have extremely crappy error handling. Tracking down issues here is hit or miss.
/dist
/src
app.js
app.vue
.babelrc
gulpfile.js
index.html
package.json
Gulp File
var gulp = require("gulp");
var fs = require("fs");
var vueify = require("vueify");
var browserify = require("browserify");
gulp.task("vueify", function(){
return browserify('./src/app.js')
.transform(vueify)
.bundle()
.pipe(fs.createWriteStream("./dist/bundle.js"))
});
app.js
var Vue = require('vue');
var App = require('./app.vue');
new Vue({
el: '#app',
render: function(h){
return h(App);
}
});
app.vue
I added text that would be easily found in the bundle.js file.
<template lang="pug">
.app
h1 Test Template persimmon
p {{title}}
</template>
<script>
export default {
name: "app",
data() {
return {
title: "Pug View Page " + new Date().toTimeString()
}
}
};
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Gulp Tests</title>
</head>
<body>
<p>App should be between here</p>
<div id="app"></div>
<p>And here</p>
<script src="dist/bundle.js"></script>
</body>
</html>
