Vue.jsページとWordPressを統合しますか？

Question

Vue.js 2で1ページを作成し、それを既存のWordPressウェブサイトに追加したいとします。メニューの新しいページとして。 WordPressの中ではどうしたらいいですか？すでに古いWordPressサイトがあり、Vueでページ/ツールを開発しようとしています。終了したら、WordPressサイトのメニューのどこかに新しいページとして追加したいと思っています。

可能ですか？私はどのような手順を踏むべきですか？

---

私はカスタムテンプレートを作成しましたが、内部には簡単なdivメッセージがあります。 functions.phpで

new Vue({ 
 
     el: "#hello-world-app", 
 
     data() { 
 
      return { 
 
      msg: "Hello World!" 
 
      } 
 
     } 
 
     });

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="main-content" class="main-content"> 
 

 
\t <div id="primary" class="content-area"> 
 
\t \t <div id="content" class="site-content" role="main"> 
 
\t \t \t 
 
    <div id="hello-world-app"> 
 
     <h1>{{ msg }}</h1> 
 
    </div> 
 

 

 
\t \t </div><!-- #content --> 
 
\t </div><!-- #primary --> 
 
</div><!-- #main-content -->

Iは、これらの追加：

function my_enqueue_stuff() { 
    if (get_page_template_slug() == 'page-surveypage.php') { 
     wp_enqueue_script('vue-dist', 'get_template_directory_uri() . '/js/vue.js, array(), 1.1, true); 
     wp_enqueue_script('vue-survey', 'get_template_directory_uri() . '/js/survey.js, array(), 1.1, true); 
    } 
} 
add_action('wp_enqueue_scripts', 'my_enqueue_stuff'); 

Iカスタムテンプレートにページをロードするときしかし、 {{MSGを}示します。 vueスクリプトをダウンロードしてjsフォルダに配置するのは間違っていますか？

Answer 1

あなたの（子）テーマに新しいテンプレートが追加される可能性があります。これがこの1ページだけの場合は、Vuejsアプリを表示するページのスラッグで指定された特定のページテンプレートにします。複数のページでこれを使用したい場合は、作成者が作成するページに割り当てることができる汎用テンプレートファイルを作成するか、短いコードでvuejsコンポーネント/アプリケーションをラップすることができます。 （テンプレートファイルのnaming conventionsを参照してください）

配信方法を決定したら、バンドル業者によって作成されたvuejs javascriptファイルと、あなたのアプリにバンドルされています。

これは役に立ちますか？