不積跬步，無以至千里；不積小流，無以成江海。

Vuejs語言基礎

元件註冊：

1. 建立元件構造器：呼叫Vue.extend()方法建立元件構造器（這種寫法在Vue2.0中幾乎已經看不到了）

(1) 呼叫Vue.extend()建立的是一個元件構造器

(2) 通常在建立元件構造器時，傳入template代表我們自定義元件的模板

2. 註冊元件：呼叫Vue.component()方法註冊元件

(1) 呼叫Vue.component（），將剛才的元件構造器註冊為一個元件，並且給他起一個元件的標籤名稱

(2) 所以需要傳遞兩個引數：1.註冊元件的標籤名 2.元件構造器

3. 使用元件：在Vue例項的作用範圍內使用元件

(1) 元件必須掛載在某個Vue例項下，否則它不會生效

<div id="app">
<!--  3.使用元件-->
  <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>

<script>
  // 1.建立元件構造器物件
  const cpnC = Vue.extend({
    //傳入template自定義元件的模板
    template:
        `<div>
            <h2>我是標題</h2>
            <p>我是內容，哈哈哈</p>
         </div>`
  })
  // 2.註冊元件
  // Vue.component('元件的標籤名')
  Vue.component('my-cpn', cpnC)
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好呀'
    }
  })
</script>

部落格借鑑：https://blog.csdn.net/vfjcgg/article/details/106771236