Vue工程结构分析

1.引言

我们上一次讲了Vue的工程如何创建，但是，Vue的工程结构较为复杂，所以，今天我们来分析一下这些文件都是干什么的。

2.分析结构

2.1 外部结构

我们首先来看一下外部结构，就是一些对于我们写Vue代码没有什么影响的部分，我们来看一下包含了那些文件：

我们可以看到，除了src文件夹和index.html文件，其他都是无关紧要的文件，这些我们写代码的时候基本不会去动它们，它们就是对我们的代码运行和书写代码提供了一个辅助的作用。

但是，我们要先处理一个问题，那就是这些文件会报错（这样不会，当你打开env.d.ts文件就会出现提示），我这里已经处理好了，所以没有这个问题，你们有，所以我们要处理一下。

首先，我们按住键盘上面的 Ctrl+Shift+` ，这样我们就打开了VS Code的终端。如果使用的不是VS Code的话，那么我们找到这个项目，打开它：

然后再顶部地址栏里面输入cmd：

然后按下回车键：

OK，所有人都已经打开了终端，然后我们在终端里面输入"npm i"，就是npm install的缩写，然后按下回车键：

等待一会儿，安装结束后重启编辑器即可。

然后我们来分析结构，这里我就简单讲一下了，两三句话搞定！

首先是src上面的三个文件夹，这都是VS Code为了写好Vue而做的适配，不用管它！

然后就是src和index.html中间的两个文件夹，这些都是编辑器的一些适配！

最后就是index.html下面的三个文件夹，这些都是一些编辑器设置以及使用方法！

2.2 内部结构

所谓的内部结构就是src文件夹和index.html文件。

我们首先打开index.html，因为这是我们项目的入口文件，所有的代码和脚本都会从index.html文件开始执行。内容：

html 复制代码

<!DOCTYPE html>
<html lang="">
  <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.ts"></script>
  </body>
</html>

我们可以看到body标签里面有两个部分。第一行是创建一个app组件，就是以后写的Vue文件都会在这个div摆放的位置所展示出来。就例如，我们要种花，那么div就相当于花盆，这一点很好理解。

下一行十分重要，它引入了一个文件------main.ts。

我们打开main.ts，内容：

TypeScript 复制代码

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

发现只有四行（我的main.ts重新写过一遍，把第一行给删掉了）。第一行就是一堆样式，我们学习Vue不需要这一堆样式，所以我们把它给删除掉。然后第二行特别重要，它从vue里面引入了一个createApp，这就相当于我们种花从超市把种子买到家里来。然后第三行就是进入一个App组件，这就相当于确定好花的根。最后第四行就是使用这个组件，相当于把种子播撒到土里，让花儿茁壮成长。

然后我们在看一下src文件夹里面别的文件，我们先来看一下App.vue：

这个下面还有好多，我就先不截了，太浪费空间了！

这一个vue文件就是我们Vue项目的组件，组件的定义可以在我React组件1(认识、定义组件)这篇文章里面了解一下，我这里就不做过多的解释了。而这一个文件就是刚才引入的App，它我们刚才也解释过了，就是花儿的根！

还有一个Components文件夹，这里面的所有文件都是组件，但是不想App.vue这样地位那么高，它们更像是花儿的枝叶，就是App.vue要开枝散叶才能形成一朵花儿！

哦，对了！还有CSS样式表文件夹，这个也没有什么用，学习阶段就直接删掉！

这时候，我们的结构就分析结束啦！

3.总结

这篇文章分析了一个完整的Vue3工程都包含了那些组成部分，可以辅助你们对Vue这门前段框架的学习！所以一定要学习透彻、学习明白！

再见！