Vue.jsの公式ドキュメントを整理していく 2回目

公式ドキュメントがまたカタカナ語ばっかでわからん。
ということで、またブログにして整理していくことにした。今回は「Vueアプリケーションの作成」の章を整理していく。

createApp関数

vueのアプリ開発は、まずcreateApp関数で、アプリのインスタンスを作ることから始まる。
要するにアプリの枠組みを最初に作ってしまうのだ。

import { createApp } from 'vue'

const app = createApp({
  /* ルートコンポーネント オプション */
})

ちなみにこのソースコードは公式ドキュメントをコピペしたもの。

この/*ルートコンポーネント　オプション */のところに実際に表示されるボタンだとかテキストだとかの部品を記述していくことになる。公式ドキュメントではこういう部品のことをコンポーネントと呼んでいるので、ここでもそう呼ぶことにする。実際はコンポーネントの意味も知らなかったなんて言えな((ry

ルートコンポーネント

さっき、部品を記述していくとか言ったが、そのまま書き込むわけではないらしい。ルートコンポーネントという、ほかのコンポーネントをまとめられる親玉みたいのが必要になる。
単一ファイルコンポーネントでは、単一ファイルコンポーネント自身がルートコンポーネントになる。

import { createApp } from 'vue'
// ルートコンポーネントを単一ファイルコンポーネントからインポートする
import App from './App.vue'

const app = createApp(App)

上のコードでは、createAppにAppというルートコンポーネントを渡している。
そしてそのAppというルートコンポーネントは、インポートした単一ファイルコンポーネントのことだ。

アプリのマウント

.mountメゾットでコンポーネントはアプリ上に表示されるようになる。

.html

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

.js

app.mount('#app')

.mountのおかげで上のdivがページに反映されるようになる。

まとめ

なんか公式にはほかにもいろいろ書いてあったが、結局は、
アプリの枠組みはcreateApp()で作れる
createApp()には単一ファイルコンポーネントを渡す
mount()でアプリに反映できる
ということ。
あと公式より、一つだけのアプリだけでページを作るんじゃなくて、いっぱいアプリを作ってページを作れとのこと。