vue把jade转换为html,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应用程序.

我希望它有所帮助.

标签：javascript,node-js,vue-js,pug,express

来源： https://codeday.me/bug/20190824/1703948.html