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) {
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应用程序。
希望这有所帮助。