前言

根据某站的vue教学视频，看万卷教程不如敲万行代码，根据教学进度整理对应代码，更快的熟悉这门语言

流程

基本介绍

vscode打开vite创建的项目，简单介绍我们常用到的项目文件

env.d.ts ：依赖引入，识别各自文件，常用的依赖都在里面

public文件夹：保存css，js等静态文件

Src文件夹：代码文件目录
index.html：入口文件，引入main.ts依赖，调用app组件

tsconfig等文件：ts配置文件，也是vue3的新特点
main.ts：启动文件，可以理解为程序入口

可以看到，createApp创建App应用，然后传单app组件到前端index.html，前端使用app组件

所以我们才会在新创建的脚手架项目中看到vue的相关页面，其实就是App.vue的内容

修改app.vue代码，添加自己的组件

新建目录components，添加一个Person.vue，加点基本信息，如图。

代码参考：

<template>：这个里面的代码是控制页面的布局结构
<script >：这个里面的代码是控制数据的交互，简单理解就是控制页面动态的显示数据
<style>：这个里面的代码是控制页面的样式，类似颜色，字体大小，边框等等，给毛坯房装修

<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'PersonA',
  data() {
    return {
      name: '张三',
      age: 18,
      tel: 13888888888,
    }
  },
  methods: {
    showTel() {
      alert(this.tel)
    },
  },
}
</script>

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

把Person.vue注册到App.vue，然后使用上面这个页面效果。

代码参考：

<script> 中引用Person.vue，然后注册到组件中
<template>中直接使用这个Person组件，这样Person.vue我们写的页面样式就会镶嵌到App.vue中，最后显示到index.html

<template>
  <div class="app">
    <h1>hello world</h1>
    <Person></Person>
  </div>
</template>

<script lang="ts">
import Person from './components/Person.vue'

export default {
  name: 'App', //组件名
  components: { Person }, //注册组件名
}
</script>

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

启动代码

npm run dev

查看效果

访问http://localhost:5173/

ok了