如何將ExpressJS，VueJS，Jade一起使用？

Question

將ExpressJS，VueJS和Jade一起使用的最佳做法是什么？

這是一個有點愚蠢的問題，但我是否需要將Jade轉換為HTML（就像我知道的那樣，因為VueJS無法提供Jade文件）？
我需要在ExpressJS中提供Jade或轉換后的HTML索引文件嗎？

不使用VueJS，我的index.js文件中的代碼是這樣的：

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


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

當我想使用Gulp時，那么......怎么樣？

Answer 1

ExpressJS位於后端，使用.jade（實際上重命名為.pug）模板生成並提供html。 接下來，您可以使用Vue（客戶端框架）開發您想要的任何內容。

所以，你可以做的是，創建一個.jade模板（.pug），如下所示：

...
    body
        p {{message}}

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

這是一個簡單的例子。 重要的是你只是像往常一樣提供.jade，然后，你包含vue庫來使用它。

稍后，您可以使用Gulp和Webpack-Stream工具進行更好的前端開發，以編譯.vue文件。

像這樣的gulpfile.js ，用於編譯應用程序的所有腳本：

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"));
});

您的webpack.config.js的內容可能是：

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

*請注意，您需要使用vue-loader包讓Webpack編譯.vue文件

通過這種方式，您將能夠開發出完整的Express＆Jade + VueJS應用程序。

我希望它有所幫助。

Answer 2

您需要將jade文件編譯為HTML。 我用prepros進行編譯。 但我已經轉移到haml而不是玉。 但這將完美地運作。

對於內聯javascript。 用這個

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

Answer 3

一般情況下 - 使用webpack已經足夠了。 我之前有類似的案例，用於輸入jade模板和.vue文件。 基於這個例子