2017-03-12 18 views
4

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> 

おかげ

+0

最近のJSフレームワークでは、Webpackなどのバンドラを使用することが一般的です。 –

+0

それでは、私はVue-Cliが最善の方法だと思いますか?しかし、私はまた、どのようにエクスプレスを使用するか分からない:) – Earon

+1

Webpackパッケージのセットアップが完了したら、npmからエクスプレス(とプロジェクトに必要なもの)を引き出すことができます:https://www.npmjs.com/package /あなたのプロジェクトにそれをインポートします。 –

答えて

3

layout.hbsです私はNUXT.jsを使用することを提案します。彼らは既にエクスプレスがインストールされた統合システムを持っています。 httpリクエストにはaxiosを使用します。

for CSR 2つのプロジェクトを別々にビルドすることをお勧めします.1つはvuejs、もう1つはnodejsです。次に、斧を使ってコミュニケーションをとらせます。この目的のために、EXPRESSまたはRESTIFYを使用することができます。

0

私は同じ問題を抱えていましたが、自分自身で解決策を立てる前に、この質問に遭遇しました。

結局、私はデフォルトのエクスプレスジェネレータアプリ+ビルドスクリプトを使って.vueファイルをバンドルに変換して、ビューファイルで使用できるようにしました。

私が取るべき手順上の小さな記事を書いた: https://mindthecode.com/using-vue-components-in-your-express-app/

は、それが誰かに役立ちます願っています。

関連する問題