ExpressJS、VueJS、Jadeを一緒に使うには？

Question

ExpressJS、VueJS、およびJadeを併用するベストプラクティスは何ですか？

ちょっと愚かな質問ですが、VueJSがJadeファイルを扱うことができないため、JadeをHTMLに変換する必要がありますか？
ExpressJSでJadeやHTMLのインデックスファイルを提供する必要がありますか？ VueJSを使用せずに、私のindex.jsファイル内のコードは、このようなものである

：

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


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

そして、私は、その後、がぶ飲みを使用したい...どうやって？

Answer 1

jadeファイルをHTMLにコンパイルする必要があります。私はコンパイルのためにプリプロを使用しました。しかし、私はすでにヒスイの代わりにハムに移ります。しかし、これは完全に動作します。

for inline javascriptこの

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

Answer 2

ExpressJSを使用して、バックエンドに住んでいると（実際に.pugと改称）あなたの.jade生成した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' }, 
     ], 
    }, 
}; 

* Webpackで.vueファイルをコンパイルできるようにするには、vue-loaderパッケージが必要です。

これによってあなたは完全なExpress & Jade + VueJSアプリケーションを開発することができます。

私はそれが役に立ちそうです。

Answer 3

一般的には、webpackを使用することですでに目標を達成することができます。 私はエントリー・ジェイド・テンプレートと.vueファイルで似たようなケースを持っています。これに基づいてexample