eine Vue.js Seite mit WordPress integrieren?

Question

Ich möchte eine einzelne Seite mit Vue.js 2 erstellen und dann zu einer bestehenden WordPress-Website hinzufügen, z. als neue Seite im Menü. Wie werde ich das in WordPress machen? Es gibt bereits eine alte WordPress-Seite und ich werde eine Seite/ein Tool mit Vue entwickeln, also wenn es fertig ist, möchte ich es irgendwo im Menü der WordPress-Seite als neue Seite hinzufügen.

Ist es möglich? Welche Schritte sollte ich befolgen?

---

Ich habe eine benutzerdefinierte Vorlage erstellt und im Inneren habe ich eine einfache Div-Nachricht.

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 -->

In functions.php ich diese hinzugefügt:

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'); 

Allerdings, wenn ich die Seite mit der benutzerdefinierten Vorlage laden es zeigt {{msg}}. Ist es falsch, dass ich das Vue-Skript heruntergeladen und im js-Ordner abgelegt habe?

Answer 1

Ich würde wahrscheinlich mit einer neuen Vorlage in Ihrem (Kinder-) Thema gehen. Wenn dies nur für diese eine Seite gilt, erstellen Sie eine bestimmte Seitenvorlage mit dem Namen der Seite, auf der Ihre Vuejs-App angezeigt wird. Wenn Sie dies auf mehreren Seiten verwenden möchten, können Sie eine generische Vorlagendatei erstellen, die Autoren jeder erstellten Seite zuweisen können, oder Sie können Ihre vuejs-Komponente/App in einen kurzen Code einbinden. (siehe der Vorlagendateien)

Sobald Sie sich für eine Liefermethode entschieden haben, müssen Sie nur noch die von Ihrem Bundler erstellte vuejs Javascript-Datei laden, sowie alle Abhängigkeiten, die nicht vorhanden sind. t in Ihrer App gebündelt.

Hilft das?