基于 Vue 框架开发前端应用的时候，我们会创建一些组件，组件就是应用的一个页面或者页面上的一块界面，组件可以组合在一起使用。在 Vue 框架里，组件可以是单文件组件，这些文件的后缀一般就是 .vue，也就是一个 .vue 的文件就相当于是 Vue 里的一个组件。

比如在 components 下面，有一个 HelloWorld.vue ，这就是一个组件，在组件文件里一般会分成三个区域，上面这块是组件的模板，模板里可以使用 html 来设计组件界面的结构，模板内容可以放在一个 tempalte 里面。

组件里的样式可以放在这组 style 里面，这里你也可以把组件的样式单独放在样式表里，然后在这组 style 里面，用 import 导入组件需要的样式表。

组件的脚本可以放在一组 script 里面，注意这个 script 上面用 lang 说明了一下，代码是用 typescript 语言写的。

在这组 script 里面，可以先导入这个组件需要用到的一些东西，比如一些方法，或者要在这个组件里使用的其它的组件。

比如在这个组件里，先从 vue 里导入了这个 defineComponent 函数，执行它的时候会得到一个 Vue 组件，这里我们可以使用 export default ，把这个组件作为默认的导出。这样在其它的组件里面，就可以导入使用这个组件了。

这里用了一下 defineComponent 函数，交给提供了一个对象，在这个对象里面包含了组件里的一些东西，比如你可以说明组件的名字，组件支持的属性，组件里使用的数据，组件的方法等等。

name 属性的值就是这个组件的名字，这里就是 HelloWorld。

props 属性的值是个对象，它里面描述的就是这个组件支持的一些属性，这里有一个 msg 属性，这个属性的值的类型是 String，也就是字符串。

在组件的模板里面，你会发现，这里用两组花括号输出了组件里的数据，这里输出的就是这个组件的 msg 这个属性的值。

在其它组件里使用这个组件的时候，可以给这个组件传递一个叫 msg 的属性，比如在 src/views 下面的 Home.vue 这个组件里面，就使用了 components 里面的 HelloWorld 组件，

你会发现，首先要导入要使用的组件，然后在这个组件的 components 属性里面，说明一下组件里使用的组件都有哪些，这里就是 HelloWorld。

这样在这个组件的模板里面，就可以使用这个 HelloWorld 组件了。使用这个组件的时候，我们设置了一下这个组件的 msg 属性，交给它一串字符。

在浏览器上可以预览一下，现在你看到的东西，大部分都是 HelloWorld 这个组件里的东西。标志下面这行标题，就是在 Home 这个组件里，使用 HelloWorld 组件的时候给它设置的 msg 属性的值。