とりあえずvue-cliを使っているけどrender: h => h(App)って何なん!? #Vue.js

対象読者

main.js

new Vue({
  render: h => h(App),
}).$mount('#app')

とりあえずvue-cliを使っているけど上記のソースの意味が分かっていない人

公式ドキュメント見ようぜ(自戒)

ここ

vue使い始めの頃はめっちゃ使いましたね。el。
vue-cliではelを使わなくなったので、代わりに.$mountを使って('#app')にマウント(ソースをはめ込み)しますよ！って事。

('#app')ってどこ?

public>index.htmlを見てください。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-practice-shop</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-practice-shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

built files will be auto injectedって書いてありますね。ここにマウントされますよって事。

ソースでも確認

確かに、index.htmlのbuilt files will be auto injectedコメントの直下にapp.jsというソースがマウントされています。
app.jsというのはapp.vueが変換されたものなので、これは納得ですね。

残りの部分(Vueのインスタンスを作成)

main.js

import App from './App.vue'

new Vue({
  render: h => h(App),
})

始めてみる構文かもしれないですが、これもやっている事としては

①./App.vueの中身をレンダリング
②その中身をVueのルートインスタンスにしているだけ

です。

結局このソースって一言で言うと何してるの？

App.vueをレンダリングして、index.htmlのid=appにはめ込んでるだけ。以上。
ぜひお役に立てば幸いです。