1. 1. App.vue中的三个标签：
2. 2. components文件夹中的 HelloWorld.vue：
3. 3. main.js：

1. App.vue中的三个标签：

• <template>包含了所有的标记结构和组件的展示逻辑。template 可以包含任何合法的 HTML，以及 Vue 特定的语法。来看一个初始项目的例子：<HelloWorld msg="Welcome to Yossur Vue.js App"/>，这个实际上是一个从 HelloWorld.vue传来的子级的组件。并且这样是向prop传入一个静态的值。

• <script>包含组件中所有的非显示逻辑，最重要的是， <script> 标签需要默认导出一个 JS 对象。该对象是您在本地注册组件、定义属性、处理本地状态、定义方法等的地方。在构建阶段这个对象会被处理和转换（包含 template 模板）成为一个有 render() 函数的 Vue 组件。接下来看一个初始项目的例子：

  import HelloWorld from './components/HelloWorld.vue';
  
  export default {
    name: 'app', //注册一个组件
    components: {
      HelloWorld//注册一个子级别组件
    }
  };
  

  其中值得注意的是ES6的新语法 import/export，export default默认只能导出一个，所以说名字是想导入的文件取的。

• <style>包括CSS代码，而且开始项目的 <style scoped>会使Vue 会把样式的范围限制到单文件组件的内容里。

2. components文件夹中的 HelloWorld.vue：

<h1>{{ msg }}</h1>：使用“Mustache” (双大括号) 语法的文本插值，Mustache 标签将会被替代为对应组件实例中 msg property 的值。无论何时，绑定的组件实例上 msg property 发生了改变，插值处的内容都会更新。

  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    }
  }

导出一个组件，这个组件有 name、props 属性。name - 组件名称，props - 组件属性。

3. main.js：

   import { createApp } from 'vue'
   import App from './App.vue'
   createApp(App).mount('#app')

每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的，传递给 createApp 的选项用于配置 根组件 。当我们挂载应用时，该组件被用作渲染的起点。