如何将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文件。 基于这个例子