グローバル登録でmain.jsで表示させてみる

（１）templateに表示用HTMLを書く
（２）scriputにデータを入れる
（３）main.jsにファイルをimportする
（４）グローバル登録する

src/App.Aue

<template>
  <LikeNumber></LikeNumber>　　　　　　　　　#グローバル登録を別ファイルで表示
</template>

src/LikeNumber.Aue

<template>
  <p>いいね({{ number }})</p>
</template>

<script>
export default {
   data() {
     return {
       number: 7                          #データはここ
     };
   }
};
</script>

src/main.js

import Vue from 'vue';
import App from './App.vue';
import LikeNumber from './LikeNumber.vue';      //import

Vue.config.productionTip = false;
Vue.component("LikeNumber", LikeNumber);        //グローバル登録

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

ちなみに今までと違ってフレームワークを使っているのでエラーをちゃんと表示してくれます。

参考

returnをretenと入力すると

Failed to compile.

./src/LikeNumber.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/maedatakuo/projects/udemy-vuejs/src/LikeNumber.vue
  8:11  error  Parsing error: Missing semicolon.

  2 | export default {
  3 |    date() {
> 4 |      retuen {
    |            ^
  5 |        number: 7
  6 |      };
  7 |    }

✖ 1 problem (1 error, 0 warnings)

やっとRuby on Railsのようなエラー表示が出て嬉しいです。