如何一起使用 ExpressJS、VueJS、Jade？答案

【问题标题】：How use a ExpressJS, VueJS, Jade together?如何一起使用 ExpressJS、VueJS、Jade？
【发布时间】：2016-11-11 19:05:38
【问题描述】：

同时使用 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 时，那么.. 怎么做？

【问题讨论】：

你在这方面有什么进展吗？
@gurghet 我试过了，但失败了。我是否需要将 Jade 编译为 html（就像我知道的那样。使用 VueJS 提供视图......）？等等。我找不到任何关于如何正确使用 VueJS + Jade 的问题（在 Stackoverflow 中）。
使用 vue-cli bootstrap 项目即可。它包含所有这些，并使用 webpack 打包所有内容。它还包括热重载

标签： javascript node.js express pug vue.js

【解决方案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 应用程序。

希望对你有帮助。

【讨论】：

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

【解决方案2】：

您需要将jade文件编译成HTML。我使用 prepros 进行编译。但是我已经转移到haml而不是jade。但这会很完美。

用于内联 javascript。使用这个

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

【讨论】：

是的，我一直在使用 Gulp 来完成诸如 SASS 编译和……（JS uglify、minify）之类的任务。因此，过程需要： 1. 将 Jade 编译为 HTML（使用 gulp）。 2. 在 Vue 组件中需要 HTML 模板 3. 所有其他步骤与往常一样。我只是感到困惑。这种理解正确吗？

【解决方案3】：

在一般情况下 - 使用 webpack 已经足够了。我之前有类似的案例，入口玉模板和 .vue 文件。基于此example

【讨论】：