admin管理员组文章数量:1130349
What is the best practice to use ExpressJS, VueJS and Jade together?
It's a little bit stupid question, but do I need convert Jade to HTML (like I know, because VueJS can't serve Jade files)?
Do i need serve a Jade or converted HTML index file in ExpressJS?
Without using VueJS, code in my index.js file is something like this:
app.set("view engine", "pug");
app.set("views", __dirname + "/templates");
app.get('/', function(req, res){
res.render("index");
});
And when I want to use Gulp, then.. how?
What is the best practice to use ExpressJS, VueJS and Jade together?
It's a little bit stupid question, but do I need convert Jade to HTML (like I know, because VueJS can't serve Jade files)?
Do i need serve a Jade or converted HTML index file in ExpressJS?
Without using VueJS, code in my index.js file is something like this:
app.set("view engine", "pug");
app.set("views", __dirname + "/templates");
app.get('/', function(req, res){
res.render("index");
});
And when I want to use Gulp, then.. how?
Share Improve this question edited Jul 11, 2016 at 9:43 Chalic asked Jul 9, 2016 at 8:06 ChalicChalic 951 silver badge11 bronze badges 3- Did you make any progress with this? – gurghet Commented Jul 11, 2016 at 7:09
- @gurghet I tried, but that was a failure. Do i need pile a Jade to html (like I know. To serve views with VueJS...)? Etc. I can't find any question (in Stackoverflow) about how to use VueJS + Jade correctly. – Chalic Commented Jul 11, 2016 at 9:42
- Just use the vue-cli bootstrap project. It contains all of this and uses webpack to package everything. It also includes hot reload – vbranden Commented Sep 14, 2016 at 22:43
3 Answers
Reset to default 7ExpressJS lives at the back-end and uses your .jade (actually renamed as .pug) templates to generate and serve html. And that's all, next, you can use Vue (client side framework) to develop anything you want.
So, what you can do is, create a .jade template (.pug) like this:
...
body
p {{message}}
script(src='path/to/vue.js')
script.
const app = new Vue({
el: 'body',
data(){
return {
message: 'Hello World!'
}
}
});
It is a simple example. The important thing is that you just are serving a .jade like always, and then, you include the vue library to use it.
Later, you can approach a better front-end development using Gulp and Webpack-Stream tools to pile .vue files.
A gulpfile.js like this, to pile all scripts of your app:
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 piled"));
});
The content of your webpack.config.js could be:
module.exports = {
devtool: 'source-map',
module: {
loaders: [
{ test: /\.vue/, loader: 'vue' },
],
},
};
*Note that you will need the vue-loader package to let Webpack pile .vue files
By this way you will be able to develop a plete Express & Jade + VueJS application.
I hope it helps.
You need to pile jade file into HTML. I used prepros for piling. But I already transfer to haml instead of jade. But this will work perfectly.
for inline javascript. Use this
script.
if(usingJade)
console.log('you are awesome')
else
console.log('you are not awesome');
In general case - using of webpack is already enough for goal. I have similar case before with entry jade template and .vue files. Based on this example
What is the best practice to use ExpressJS, VueJS and Jade together?
It's a little bit stupid question, but do I need convert Jade to HTML (like I know, because VueJS can't serve Jade files)?
Do i need serve a Jade or converted HTML index file in ExpressJS?
Without using VueJS, code in my index.js file is something like this:
app.set("view engine", "pug");
app.set("views", __dirname + "/templates");
app.get('/', function(req, res){
res.render("index");
});
And when I want to use Gulp, then.. how?
What is the best practice to use ExpressJS, VueJS and Jade together?
It's a little bit stupid question, but do I need convert Jade to HTML (like I know, because VueJS can't serve Jade files)?
Do i need serve a Jade or converted HTML index file in ExpressJS?
Without using VueJS, code in my index.js file is something like this:
app.set("view engine", "pug");
app.set("views", __dirname + "/templates");
app.get('/', function(req, res){
res.render("index");
});
And when I want to use Gulp, then.. how?
Share Improve this question edited Jul 11, 2016 at 9:43 Chalic asked Jul 9, 2016 at 8:06 ChalicChalic 951 silver badge11 bronze badges 3- Did you make any progress with this? – gurghet Commented Jul 11, 2016 at 7:09
- @gurghet I tried, but that was a failure. Do i need pile a Jade to html (like I know. To serve views with VueJS...)? Etc. I can't find any question (in Stackoverflow) about how to use VueJS + Jade correctly. – Chalic Commented Jul 11, 2016 at 9:42
- Just use the vue-cli bootstrap project. It contains all of this and uses webpack to package everything. It also includes hot reload – vbranden Commented Sep 14, 2016 at 22:43
3 Answers
Reset to default 7ExpressJS lives at the back-end and uses your .jade (actually renamed as .pug) templates to generate and serve html. And that's all, next, you can use Vue (client side framework) to develop anything you want.
So, what you can do is, create a .jade template (.pug) like this:
...
body
p {{message}}
script(src='path/to/vue.js')
script.
const app = new Vue({
el: 'body',
data(){
return {
message: 'Hello World!'
}
}
});
It is a simple example. The important thing is that you just are serving a .jade like always, and then, you include the vue library to use it.
Later, you can approach a better front-end development using Gulp and Webpack-Stream tools to pile .vue files.
A gulpfile.js like this, to pile all scripts of your app:
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 piled"));
});
The content of your webpack.config.js could be:
module.exports = {
devtool: 'source-map',
module: {
loaders: [
{ test: /\.vue/, loader: 'vue' },
],
},
};
*Note that you will need the vue-loader package to let Webpack pile .vue files
By this way you will be able to develop a plete Express & Jade + VueJS application.
I hope it helps.
You need to pile jade file into HTML. I used prepros for piling. But I already transfer to haml instead of jade. But this will work perfectly.
for inline javascript. Use this
script.
if(usingJade)
console.log('you are awesome')
else
console.log('you are not awesome');
In general case - using of webpack is already enough for goal. I have similar case before with entry jade template and .vue files. Based on this example
本文标签： javascriptHow use a ExpressJSvuejsJade togetherStack Overflow
版权声明：本文标题：javascript - How use a ExpressJS, VueJS, Jade together? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/questions/1741894252a1893893.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论