javascript – 如何将ExpressJS,VueJS,Jade一起使用？

将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时,那么……怎么样？

解决方法:

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& amp; Jade VueJS应用程序.

我希望它有所帮助.

原文地址：https://codeday.me/bug/20190824/1703948.html

javascript – 如何将ExpressJS,VueJS,Jade一起使用？

相关推荐