【vue-cli】Vue.jsのComponentでボタン機能を実装したい

前提・実現したいこと

vue-cliを使用しテンプレートを作成しました
template: '<button>Like</button>'
をHTML側で表示させたいです。
理想はこんな感じです。

発生している問題・エラーメッセージ

componentsに値を与えるとページが白紙になります。

components: {
      'like-component': likeComponent
}

該当のソースコード

App.js

vue.js
1<template>
2  <div class="hello">
3    <h1>{{ msg }}</h1>
4    <like-component></like-component>
5  </div>
6</template>
7
8<script>
9import Vue from 'vue'
10export default {
11  name: 'HelloWorld',
12  template: '<button>Like</button>', 
13  data () {
14    return {
15      msg: 'Welcome to Your Vue.js App'
16    }
17  }
18}
19
20var LikeButton = Vue.extend({
21  name: 'HelloWorld',
22  template: '<button>Like</button>',
23  components: {
24      'like-component': likeComponent
25    },
26  data: function() {
27    return {
28      msg: 'Please press this button!'
29    }
30  }
31})
32</script>
33

試したこと

scriptタグ最下部にcomponentを書いてみても白紙になりました。

vue.js
1Vue.component(like-component, LikeButton)

長時間トライアンドエラーを繰り返しました。
下手な質問で申し訳ありませんが、ご教示願います。

行動規範の内容に同意します

回答1件

一度、vue.jsのガイドをご覧になった方がよろしいかと思います。
Vue.js

その書き方は単一コンポーネントの書き方かと思われるので、.vueファイルになります。

HTMLにjs含めて書く場合は下記の様になるかと。
(jsファイルのみ外出する場合は適宜対応してください)

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <title>Vue test</title>
6  <meta charset="UTF-8">
7  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
8</head>
9
10<body>
11  <div id="app">
12    <h1>{{ msg }}</h1>
13    <like-component />
14  </div>
15  <script>
16    var app = new Vue({
17      data: {
18        msg: 'Welcome to Your Vue.js App'
19      }
20    })
21    Vue.component('like-component', {
22      template: "<button @click='likeClick'>Like</button>",
23      methods: {
24        likeClick() {
25          console.log("like")
26        }
27      }
28    })
29    app.$mount('#app');
30
31  </script>
32</body>
33
34</html>
35
36

単一コンポーネントの場合はこうなります。

vue
1# Main
2<template>
3  <div>
4    <h1>{{ msg }}</h1>
5    <like-component/>
6  </div>
7</template>
8
9<script>
10import LikeComponent from "./LikeComponent.vue"
11
12export default {
13  data() {
14    return {
15      msg: "Welcome to Your Vue.js App"
16    }
17  },
18  components: {
19    LikeComponent
20  }
21}
22</script>
23
24# LikeComponent
25
26<template>
27  <button @click="likeClick">Like</button>
28</template>
29
30<script>
31export default {
32  methods: {
33    likeClick() {
34      console.log("like")
35    }
36  }
37}
38</script>
39