WordPress に Vue.js を スモールスタートで入れてみる その2
とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その2
基本構造 WordPress の各テンプレートファイルからVue.jsを呼び込む
トップページの場合、 homeGallery.vue
には Vue ( <template>
と <script>
) を書いていく感じ。
▼ app.js
import Vue from 'vue' // import文を使ってSassファイルを読み込む。(これがないと.scss => .cssへコンパイルされない) import './../scss/app.scss'; // Variable import { APP_ID } from './variable'; // Vue Component import HomeGallery from './component/homeGallery'; // Home window.renderHome = function () { new Vue({ el: `#${APP_ID}`, components: { HomeGallery } }); }
▼ front-page.php
<?php get_header(); ?> <home-gallery></home-gallery> <?php get_footer(); ?>
▼ footer.php
<script type='text/javascript' src='/_assets/js/bundle.js'></script> <?php if ( is_front_page() ) : ?> <!-- トップページ --> <script> document.addEventListener('DOMContentLoaded', function() { renderHome() }) </script> <?php endif; ?>
定数用の.jsファイル
js/variable.js
では定数の管理を行って各.vueにexportする
const APP_ID = `app`; // サイト情報 const SITE_INFO = { name: 'siteName', url: `https://siteUrl.com` } // APIのベースURL const API_POST_URL = `${SITE_INFO.url}/wp-json/wp/v2`; const API_OPTION_URL = `${SITE_INFO.url}/wp-json/acf/v3/options/options/`; export { APP_ID, SITE_INFO, API_POST_URL, API_OPTION_URL };
全体構成編、ちょっと長くなったのでここまで。
次回はもう少し細かい内容になる予定です。