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">

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
			
    <div id="hello-world-app">
      <h1>{{ msg }}</h1>
    </div>


		</div><!-- #content -->
	</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' );

但是，当我使用显示的自定义模板加载页面时 {{MSG}}。我下载了vue脚本并将其放在js文件夹中是不对的？

Answer 1

我可能会在你的（子）主题中使用新模板。如果这仅适用于这一页，则将其设为特定的页面模板，以页面的slug命名，该页面将显示您的Vuejs应用程序。如果您想在多个页面上使用它，您可以创建一个通用模板文件，作者可以将其分配给他们创建的任何页面，或者您可以将您的vuejs组件/应用程序包装在一个简短的代码中。（参见模板文件的naming conventions）

一旦确定了交付方法，那么您只需确保加载由bundler创建的vuejs javascript文件，以及未绑定在应用程序中的任何依赖项。

这有帮助吗？

将Vue.js页面与WordPress集成？

1 个答案: