What is the best practice to use ExpressJS, VueJS and Jade together?
It's a little bit stupid question, but do I need convert Jade to HTML (like I know, because VueJS can't serve Jade files)?
Do i need serve a Jade or converted HTML index file in ExpressJS?
Without using VueJS, code in my index.js file is something like this:
app.set("view engine", "pug");
app.set("views", __dirname + "/templates");
app.get('/', function(req, res){
res.render("index");
});
And when I want to use Gulp, then.. how?
Zalo :
ExpressJS lives at the back-end and uses your .jade (actually renamed as .pug) templates to generate and serve html. And that's all, next, you can use Vue (client side framework) to develop anything you want.\n\nSo, what you can do is, create a .jade template (.pug) like this:\n\n...\n body\n p {{message}}\n\n script(src='path/to/vue.js')\n script.\n const app = new Vue({\n el: 'body',\n data(){\n return {\n message: 'Hello World!'\n }\n }\n });\n\n\nIt is a simple example. The important thing is that you just are serving a .jade like always, and then, you include the vue library to use it.\n\nLater, you can approach a better front-end development using Gulp and Webpack-Stream tools to compile .vue files.\n\nA gulpfile.js like this, to compile all scripts of your app:\n\ngulp.task('scripts', () => {\n return gulp.src(\"resources/assets/js/main.js\")\n .pipe(named())\n .pipe(webpack(require('./webpack.config')))\n .pipe(sourcemaps.init({loadMaps: true}))\n .pipe(through.obj(function (file, enc, cb) {\n // Dont pipe through any source map files as it will be handled\n // by gulp-sourcemaps\n var isSourceMap = /\\.map$/.test(file.path);\n if (!isSourceMap) this.push(file);\n cb();\n }))\n .pipe(sourcemaps.write('.'))\n .pipe(gulp.dest(\"./public/js\"))\n .pipe(notify(\"Scripts compiled\"));\n});\n\n\nThe content of your webpack.config.js could be:\n\nmodule.exports = {\n devtool: 'source-map',\n module: {\n loaders: [\n { test: /\\.vue/, loader: 'vue' },\n ],\n },\n};\n\n\n*Note that you will need the vue-loader package to let Webpack compile .vue files\n\nBy this way you will be able to develop a complete Express & Jade + VueJS application. \n\nI hope it helps.",
2016-09-14T10:01:05
user6302777 :
You need to compile jade file into HTML. I used prepros for compiling. But I already transfer to haml instead of jade. But this will work perfectly.\n\nfor inline javascript. Use this\n\nscript.\n if(usingJade)\n console.log('you are awesome')\n else\n console.log('you are not awesome');\n",
2016-07-11T09:49:43