JavaScript
SPA
Vue.js

Vue.js アプリケーションにおけるエントリーポイントの書き方メモ


はじめに

これは備忘録です。

Vue.js アプリケーションを書いていく時にエントリーポイントの書き方がいくつかあるなぁと思ったので、これまで自分がやったパターン(といっても片手で数えられるくらい)をメモします。


触れない話


  • Nuxt.js


書き方達


単純な Vue.js アプリケーションの時

CSSセレクタで対象を指定して Vue インスタンスをマウントします。

初期化時の引数に el プロパティを指定するか、 el を指定せずに作成したインスタンスに対して $mount() を実行します。

参照:

el: https://jp.vuejs.org/v2/api/#el

$mount(): https://jp.vuejs.org/v2/api/#vm-mount

<div id="app">

<App/>
</div>

import Vue from 'vue'

import App from './components/App.vue'

// パターン1
new Vue({
el: '#app',
components: {
App
}
})

// パターン2
new Vue({
components: {
App
}
}).$mount('#app')


マウント先をコンポーネントで置き換える形

render() メソッドを使うことで、マウント先を指定のコンポーネントで置き換えるように描画できます。

以下の例では、Vueインスタンスのマウント後は div#appspan.foobar に置き換わります。

属性の id="app"div ごと消えるので、このままでは再利用できません。 #app のセレクタを再利用した場合は createElement() の引数を確認するか、1つ後の書き方を参照してください。

参照:

render(): https://jp.vuejs.org/v2/api/#render

createElement(): https://jp.vuejs.org/v2/guide/render-function.html#createElement-%E5%BC%95%E6%95%B0

<div id="app"></div>


components/App.vue

<template>

<span class="foobar">
foobar
</span>
</template>

<script>
export default {
name: 'App'
}
</script>


import Vue from 'vue'

import App from './components/App.vue'

new Vue({
render(h){
return h(App)
}
}).$mount('#app')

h() というのは createElement() の事で、「 html (のような物)を生成するメソッド」に対してエイリアス的によく付けられる名前のようです。多分。

(参考: What does `h` mean? · Issue #6 · vuejs/babel-plugin-transform-vue-jsx


VueRouter を使いつつ root 要素にコンポーネントを描画したい。

上とやる事は同じで render() を使います。

SPAを作る際にページ単位を担当するコンポーネントを、 body 直下などの root 要素として配置したい場合などが該当します。

ただ、今回は全ページコンポーネントに対し id="app" を動的に付与したい場合の対応も行います。

こうすることで画面内に常に #app というセレクタが存在することになるので、例えば link タグ等で読み込んでいる CSS 内で #app に対するスタイルが記述されていても、問題なく反映されます。

<div id="app"></div>

import Vue from 'vue'

import VueRouter from 'vue-router'

import PageRoot from './components/PageRoot.vue'
import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'

const routes = [
{
path: '/',
name: 'PageRoot',
component: PageRoot
},
{
path: '/page1',
name: 'Page1',
component: Page1
},
{
path: '/page2',
name: 'Page2',
component: Page2
},
]

const routerOption = {
routes
}

Vue.use(VueRouter)

new Vue({
router: new VueRouter(routerOption),
render(h){
return h('router-view', {
attrs: {
// router-view で描画されるコンポーネント全てに、常に `id="app"` を持たせたい場合に記述します。
id: '#app'
}
})
}
}).$mount('#app')

肝は createElement()router-view コンポーネントを描画させている部分です。