这是一篇普通大学生的学习记录帖，学习Vue3之前学过一些html,css,javascript的基础知识，希望可以通过记录博客对知识进行每日总结。

---

前言

上一篇讲到我们创建了一个初始化的Vite项目，那么这一次我们自己来写一个小组件，在这个过程中我们讲讲什么是选项式API和组合式API，以及他们的区别是什么。

---

一.先来自己写一个APP组件

       我们把src文件夹里的所有文件都删除，在src文件夹里创建一个components文件夹用于存放我们自己写的组件，再新建一个App.vue文件和main.ts文件，然后在components文件夹里新建文件：Person.vue文件作为自己写的组件文件（组件文件一般首字母大写）。

复习：src文件夹里必须要有App.vue和main.ts这两个文件

1.我们先打开main.ts文件，干下面三件事：

1. 从vue库中引入 createApp 方法用来创建应用。
2. 引入App组件作为根组件（每个应用都需要一个根组件）
3. 用 createApp 方法调用根组件 App 来创建一个应用，创建完应用，把这个应用挂载（mount）到id为app的容器里。代码如下：

//main.ts
import {createApp} from 'vue'//先从vue库中引入createApp方法
import App from './App.vue'  //引入App根组件
createApp(App).mount('#app')   //创建一个应用，这些应用的根组件是App组件，然后把他挂载到id为app的容器里

2.接着我们打开App.vue文件，写一些页面样式

复习：.vue文件需要写三个标签：template（写结构）,script（写脚本，js.ts代码）,style（css样式）

//App.vue
<template>
  <!-- html -->
   <div class="app"> 
      <h1>hello vue</h1>
   </div>
</template>

<script lang="ts">
  // JS或TS脚本
  export default {   //默认暴露
    name: 'App'     //组件名
  }
</script>

<style>
  /* css */
  .app{
    background-color: pink;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }

</style>

写好之后保存，在终端运行npm run dev启动脚手架，显示这个页面就成功了！

二.写一个Person.vue组件

3.打开Person.vue，我们来自己写一个组件.

在components文件里的.vue文件都是服务于App这个根组件的。代码如下：

<template>
  <!-- html -->
   <div class="Person"> 
      <h2>姓名：{{ name }}</h2>
      <h2>年龄：{{ age }}</h2>
      <button @click="showTell">联系电话</button>
   </div>
</template>
<script lang="ts">
  // JS或TS脚本
  export default {   //默认暴露
    name: 'Person',  //组件名
    data(){
      return {
        name: '张三',
        age: 18,
        tel: '111'
      }
    },
    methods:{
      showTell(){
        console.log(this.tel)  //必须使用this,this指向当前的组件实例
      }
    },
}     //组件名
</script>
<style>
  /* css */
  .Person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }

</style>

4.当我们写好一个组件之后怎样让这个组件生效呢？

我们之前说component里的.vue文件（子组件）都是服务于App.vue这个根组件的，而main.ts文件中通过引入App.vue这个根组件来创建应用。最后通过.html文件的script标签引入main.ts文件渲染出页面。那么怎么才能让.vue子组件和App.vue根组件联系起来呢？让我们打开App.vue文件，干下面三件事：

1. 在script里引入Person组件
2. 在export里注册Person组件。（注册好组件就可以直接使用组件了！）
3. 在template里使用组件

关于export和import本人也不太会，在这里附上其他博主的解释。

ES6模块主要有两个功能：export和import
-export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
-import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。这几个都是ES6的语法。
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/harry5508/article/details/84025146

完成这些我们就能成功跑起来这个应用了！在终端输入npm run dev看看页面效果。

---

最后

如果这篇文章对你有帮助的话就点个赞吧！