组件化开发是程序代码的分类复用，使用抽象的思想。
vue组件创建的基本方法如下：
1.创建组件构造器
2.注册组件
3.使用组件
这个是最原始的组件创建和使用的代码，后面会慢慢演化
1 <!--
2 @author:invoker
3 @project:project_lianxi
4 @file: 01-vue组件的基本使用.html
5 @contact:invoker2021@126.com
6 @descript:
7 @Date:2021/7/2 14:43
8 @version: html5
9 -->
10
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14 <meta charset="UTF-8">
15 <title>01-vue组件的基本使用</title>
16 </head>
17 <body>
18 <div id="app">
19 <h2>{{ message }}</h2>
20 <!-- 3.使用组件-->
21 <my-cpn></my-cpn>
22 </div>
23
24 <script src="../js/vue.js"></script>
25 <script>
26
27 // 1.创建组件构造器对象
28 const cpn = Vue.extend({
29 template: `
30 <div>
31 <h2>我是标题</h2>
32 <p>我是内容</p>
33 </div>
34 `
35 })
36
37 // 2.注册组件
38 Vue.component('my-cpn', cpn)
39 const app = new Vue({
40 el: '#app',
41 data: {
42 message: 'hello'
43 },
44 })
45 </script>
46 </body>
47 </html>
由于第二步骤，使用 Vue.component('my-cpn',cpn) 进行组件注册，在此处注册是全局组件。