ExpressJS, VueJS, Jade를 함께 사용하는 방법은 무엇입니까?

Question

ExpressJS, VueJS 및 Jade를 함께 사용하는 가장 좋은 방법은 무엇입니까?

좀 바보 같은 질문이지만, VueJS가 Jade 파일을 제공 할 수 없기 때문에 Jade를 HTML로 변환해야합니까?
ExpressJS에서 Jade 또는 HTML 색인 파일을 변환해야합니까? 내하는 index.js 파일에 VueJS, 코드를 사용하지 않고

이 같은 것입니다 :

app.set("view engine", "pug"); 
app.set("views", __dirname + "/templates"); 


app.get('/', function(req, res){ 
    res.render("index"); 
}); 

내가 꿀꺽를 사용하고자 할 때, 다음 ... 어떻게?

Answer 1

jade 파일을 HTML로 컴파일해야합니다. 나는 컴파일을 위해 prepros를 사용했다. 그러나 나는 이미 비취 대신 햄물로 옮겼다. 그러나 이것은 완벽하게 작동합니다.

인라인 자바 스크립트. 이

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

Answer 2

ExpressJS를 사용하면 백 엔드에 살고 (실제로 .pug로 이름을 변경) 당신의 .jade 생성하고 HTML을 제공하는 템플릿을 사용합니다. 그 다음으로 Vue (클라이언트 측 프레임 워크)를 사용하여 원하는 모든 것을 개발할 수 있습니다.

... 
    body 
     p {{message}} 

    script(src='path/to/vue.js') 
    script. 
     const app = new Vue({ 
      el: 'body', 
      data(){ 
       return { 
        message: 'Hello World!' 
       } 
      } 
     }); 

그것은 간단한 예입니다 :

그래서, 무엇 당신이 할 수있는이 같은 .jade 템플릿 (.pug)를 만들 수 있습니다. 중요한 점은 항상 .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' }, 
     ], 
    }, 
}; 

* Webpack에서 .vue 파일을 컴파일하게하려면 vue-loader 패키지가 필요합니다.

당신은 완벽한 Express & Jade + VueJS 응용 프로그램을 개발할 수 있습니다.

도움이되기를 바랍니다.

Answer 3

일반적으로 웹팩을 사용하면 이미 목표를 달성하기에 충분합니다. 이전에 jade 템플릿과 .vue 파일을 사용하여 유사한 사례가있었습니다. 이를 바탕으로 example