我们继续来分析了解VUE ClI 项目结构，我们主要详细关注src目录。
src：主要的源代码目录，包含以下子目录和文件：
assets：存放静态资源文件，如图片、字体等。
components：存放可重用的 Vue 组件。
App.vue：应用的根组件，所有页面和组件都从这里开始嵌套。
main.js：应用的入口文件，初始化 Vue 实例并配置全局设置。
在VUE ClI里面所有每个.vue文件都是组件，我们可以来对比一下它和我们之前写的html代码的区别。
打开一下根目录下的index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>对比我们之前写的html代码我们会发现它里面也有一个div id设置成app，它也是用来挂载Vue实例的。
然后它通过引入/src/main.js，来执行创建了一个Vue实例，来看一下这个文件，我们应该能看到一些熟悉的代码。
//引入了一个css文件
import './assets/main.css'
//在vue依赖包里面引入了一个createApp方法
import { createApp } from 'vue'
//然后引入App.vue 文件 App.vue其实就是根组件
import App from './App.vue'
//用createApp方法来创建了一个Vue实例，并挂载到#app这个dom上
createApp(App).mount('#app') app.vue 文件我们需要来改动一下，因为有些东西我们还没有学到,改成我们熟悉的样子。
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
export default {
components:{
HelloWorld,
TheWelcome
},
}
</script>template 标签里面我们主要用来写组件的模版
script 用来写组件的js代码，并且要通过export 导出这个组件
style 用来写组件的css样式
分析到这里我们大概了解了项目的基本结构，其实就是把我们之前在一个html文件里写的代码拆分到几个专属的文件里面，并且组件专门用一个.vue的文件来编写。
然后我们把src下的代码全部删除掉，我们自己来编写还原一下这些代码结构。回顾一下我们之前学习的东西，又能掌握html文件到CLI项目转变过程。
下面这个过程我们在视频里面操作吧。