1:私はインストールされたexpressjsをしました。 2:私は、インストールNPM使用VUEのフレームワークをインストールしVUE --save 3:今、私が欲しかったVueをExpressで使用する最も良い方法は?
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
<p>\{{title2}}</p>
<script>
new Vue({
el: "#app",
data: {
title2: "Hello World"
}
});
</script>
:私は、これはコードですindex.hbsにexpressjs
ためのテンプレート・エンジンとしてこの後をハンドルバーを使用そのスクリプトを実行するためにvueを使うのですが、layout.hbsのものを試してみましたが、vueをどのように組み込むのかわからないので、cdnjsからvueを追加しました。
テンプレートにはスクリプトを実行していないhbsでレンダリングされるため、headでbody endに含めることができないという問題が追加されました。
ここでもう2つ目は、users.hbsでvueを使用する場合です.Vueインスタンスをもう一度作成する必要があります。これは、さらに多くのページを続けます。
これは繰り返しコードであり、管理が非常に難しいです。
どのようにですか?毎回インスタンスを作成する必要はなく、cdnのheadタグにスクリプトを含める必要はありませんか?
私はapp.jsにVueの新しいインスタンスを追加する場合、これは警告している。このことを忘れて申し訳ありません:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
これはSSR FOR
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{{body}}}
</div>
</body>
</html>
おかげ
最近のJSフレームワークでは、Webpackなどのバンドラを使用することが一般的です。 –
それでは、私はVue-Cliが最善の方法だと思いますか?しかし、私はまた、どのようにエクスプレスを使用するか分からない:) – Earon
Webpackパッケージのセットアップが完了したら、npmからエクスプレス(とプロジェクトに必要なもの)を引き出すことができます:https://www.npmjs.com/package /あなたのプロジェクトにそれをインポートします。 –