[解決済み] VueJSコンポーネントがレンダリングされない

質問

私はウェブサイトから続く非常に基本的なvueJSのアプリを持っています。

以下は のコードがありますが、なぜコンポーネントがレンダリングされないのでしょうか？

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

<div>
<ol>
  <todo-item></todo-item>
</ol>
</div>

JS

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Vue.component('todo-item', {
    template: '<li>This is a list item</li>'
})

解決方法は？

より良い方法は シングルファイルコンポーネント を定義しています。 todo-item コンポーネントを別のファイル内に作成します。

app.vue

 import TodoItem from './components/todo-item'

 new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
    TodoItem
  }
})

コンポーネント/todo-item.vue

<template>
  <li>This is a list item</li>
</template>

<script>
  export default {
    name: 'todo-item'
  }
</script>

多くのVueプロジェクトでは、グローバルコンポーネントは Vue.component の後に new Vue({ el: '#container' }) を使えば、各ページのボディにあるコンテナ要素をターゲットにすることができます。

これは、JavaScriptが特定のビューを強化するためにのみ使用される、小規模から中規模のプロジェクトでは非常にうまく機能することができます。しかし、より複雑なプロジェクトや、フロントエンドがすべてJavaScriptで駆動している場合、これらの欠点が明らかになります。

• <強い グローバル定義 各コンポーネントに一意な名称を強制する
• 文字列テンプレート シンタックスハイライトがなく、複数行の HTML には醜いスラッシュが必要です。
• CSS非対応 HTMLとJavaScriptはコンポーネントとしてモジュール化されているが、CSSは目立って省かれていることを意味する
• ビルドステップなし Pug (旧 Jade) や Babel のようなプリプロセッサではなく、HTML と ES5 JavaScript に制限されます。

これらはすべて、シングルファイルコンポーネントに .vue を拡張し、WebpackやBrowserifyのようなビルドツールで可能にします。