Wie ein ExpressJS, VueJS, Jade zusammen verwenden?

Question

Was ist die beste Vorgehensweise, um ExpressJS, VueJS und Jade zusammen zu verwenden?

Es ist ein bisschen blöde Frage, aber muss ich Jade in HTML konvertieren (wie ich weiß, weil VueJS Jade-Dateien nicht liefern kann)?
Muss ich eine Jade oder konvertierte HTML-Indexdatei in ExpressJS bereitstellen?

Ohne VueJS, Code in meiner index.js Datei ist so etwas wie folgt aus:

app.set("view engine", "pug"); 
app.set("views", __dirname + "/templates"); 


app.get('/', function(req, res){ 
    res.render("index"); 
}); 

Und wenn ich will Gulp verwenden, dann .. wie?

Answer 1

Sie müssen Jade-Datei in HTML kompilieren. Ich habe Prepros zum Kompilieren benutzt. Aber ich übertrage bereits auf haml anstatt auf jade. Aber das wird perfekt funktionieren.

für Inline-Javascript. dieses

verwenden

script. 
    if(usingJade) 
     console.log('you are awesome') 
    else 
     console.log('you are not awesome'); 

Answer 2

Express.js lebt auf dem Back-End und verwendet Ihre .jade (eigentlich als .pug umbenannt) Vorlagen zu erzeugen und html zu dienen. Und das ist alles, als nächstes können Sie Vue (Client-seitiges Framework) verwenden, um alles zu entwickeln, was Sie wollen.

Also, was können Sie tun, ist, erstellen Sie eine .jade Vorlage (.pug) wie folgt aus:

... 
    body 
     p {{message}} 

    script(src='path/to/vue.js') 
    script. 
     const app = new Vue({ 
      el: 'body', 
      data(){ 
       return { 
        message: 'Hello World!' 
       } 
      } 
     }); 

Es ist ein einfaches Beispiel. Die wichtige Sache ist, dass Sie gerade ein .jade wie immer dienen, und dann schließen Sie die vue Bibliothek mit ein, um es zu benutzen.

Später können Sie mit Gulp und Webpack-Stream-Tools eine bessere Front-End-Entwicklung erreichen, um .vue-Dateien zu kompilieren.

A gulpfile.js wie diese, alle Skripte Ihrer Anwendung zu kompilieren:

gulp.task('scripts',() => { 
    return gulp.src("resources/assets/js/main.js") 
     .pipe(named()) 
     .pipe(webpack(require('./webpack.config'))) 
     .pipe(sourcemaps.init({loadMaps: true})) 
     .pipe(through.obj(function (file, enc, cb) { 
      // Dont pipe through any source map files as it will be handled 
      // by gulp-sourcemaps 
      var isSourceMap = /\.map$/.test(file.path); 
      if (!isSourceMap) this.push(file); 
      cb(); 
     })) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest("./public/js")) 
     .pipe(notify("Scripts compiled")); 
}); 

Der Inhalt Ihrer webpack.config.js könnte sein:

module.exports = { 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      { test: /\.vue/, loader: 'vue' }, 
     ], 
    }, 
}; 

* Beachten Sie, dass Sie das Vue-Loader-Paket benötigen, damit Webpack Vue-Dateien kompilieren kann.

Durch diese So können Sie eine komplette Express & Jade + VueJS Anwendung entwickeln.

Ich hoffe es hilft.

Answer 3

In der Regel Fall - Verwendung von Webpack ist bereits genug für das Ziel. Ich habe ähnlichen Fall zuvor mit Eintrag Jade-Vorlage und Vue-Dateien. Basiert auf dieser example