如何将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时，应该怎么做？

- Chalic

---

你在这方面有任何进展吗？ - gurghet

@gurghet 我尝试了，但失败了。我需要编译Jade到HTML吗（就像我知道的那样，用VueJS提供视图...）？等等。我在Stackoverflow上找不到任何关于如何正确使用VueJS + Jade的问题。 - Chalic

只需使用vue-cli引导程序项目即可。它包含所有内容，并使用webpack打包所有内容。它还包括热重载功能。 - vbranden

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应用程序。

希望这有所帮助。

- Zalo

---

你在这里混合使用Gulp和Webpack的原因是什么？ - kaiser

Answer 2

通常情况下，使用webpack已经足够实现目标了。 我之前也遇到过类似的情况，涉及到入口jade模板和.vue文件。基于此example。

- Alex Kuperwood

Answer 3

你需要将jade文件编译成HTML。我使用prepros进行编译。但是我已经转换到haml而不是jade。但这仍然可以完美地工作。

对于内联JavaScript，请使用以下内容

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

- user6302777

---

是的，我一直在使用Gulp来处理SASS编译和JS压缩等任务。因此，处理过程应该是：1.使用Gulp将Jade编译为HTML。2.在Vue组件中引用HTML模板。3.所有其他步骤与以往相同。我只是有些困惑，这个理解正确吗？ - Chalic