интегрировать страницу Vue.js с помощью WordPress?

Question

Я хочу создать одну страницу с Vue.js 2, а затем добавить ее на существующий веб-сайт WordPress, например. как новая страница в меню. Как я буду делать это в WordPress? Существует уже старый сайт WordPress, и я собираюсь разработать страницу/инструмент с Vue, поэтому, когда он закончен, я хочу добавить его где-нибудь в меню сайта WordPress как новую страницу.

Возможно ли это? Какие шаги я должен соблюдать?

---

Я создал пользовательский шаблон и внутри у меня есть простое сообщение div.

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

В functions.php я добавил эти:

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

Однако, когда я загрузить страницу с пользовательского шаблона он показывает {{сбщ}}. Неправильно ли я загрузил скрипт vue и поместил его в папку js?

Answer 1

Скорее всего, я поеду с новым шаблоном в вашей (дочерней) теме. Если это только для этой одной страницы, сделайте ее определенным шаблоном страницы, названным с пулком страницы, на которой будет показано ваше приложение Vuejs. Если вы захотите использовать это на нескольких страницах, вы можете создать общий шаблонный файл, который авторы могут назначить любой создаваемой им странице, или вы можете обернуть компонент/приложение vuejs в короткий код. (см. файлы шаблонов naming conventions)

После того, как вы определились с методом доставки, вам просто нужно будет загрузить файл javascript vuejs, созданный вашим поставщиком, а также любые зависимости, t в вашем приложении.

Помогло ли это?