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），如下所示：

choice_label/choice_value

这是一个简单的例子。重要的是你只是像往常一样提供.jade，然后，你包括 vue库来使用它。

稍后，您可以使用Gulp和Webpack-Stream工具进行更好的前端开发，以编译.vue文件。

像这样的 gulpfile.js ，用于编译应用的所有脚本：

...
    body
        p {{message}}

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

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

*请注意，您需要使用vue-loader包让Webpack编译.vue文件

通过这种方式，您将能够开发出一个完整的Express＆amp; amp; 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文件。基于此example

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

3 个答案: