1.目录完整结构

不同人创建出来的vue脚手架可能有所不同，这与版本有关。但目录结构基本上大同小异,大致知道每个文件是干什么的就可以了。

2.extensions.json文件

extensions.json文件在.vscode文件夹中。recommendations是推荐的意思，表示在进行开发之前最好安装一些推荐的插件。比如Vue.volar，表示要安装volar插件。
点击插件图标(我用的工具是vscode编译器):

在搜索栏搜索volar:

一般就可以搜索到相关插件。这个volar插件已经废弃，现在已经用Vue-official来取代了,所以我们安装Vue-official(点击安装按钮即可安装,上述图片中我已经安装了,所以没有安装按钮)。

3.node_modules文件夹

存放第三方库的文件夹。我们再熟悉不过了,不用过多解释。

4.public文件夹

放一些公共资源的。

5.src文件夹

该文件夹里面是我们编写的源代码。整理一下文件夹里面的内容,新建一些东西，大概类似这样子:

6.文件.gitignore

git忽略文件

7.文件env.d.ts

是一个声明文件。

按ctrl+鼠标左键，点击reference中引入“vite/client”后可以跳转到相关源码如下:

会发现里面全是声明的模块。如果之后自己有一些额外的需要声明的东西，可以追加在env.d.ts中。

8.文件index.html

项目的入口模板。

9.文件package-lock.json和文件package.json

版本锁定文件。

10.文件README.md

追加的便于其他人阅读的一些注意点可以写在里面。

11.文件vite.config.ts

该文件是给我们的vite做一些配置，之前都是配置webpack的。其实这两者很多时候很类似，都是配置的过程。

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {//配置别名,这个大家应该都很熟悉alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

在之前配置webpack时候，有一个vue.config.js的文件，我们可以在该文件中进行各种配置。

12.文件tsconfig.json和文件tsconfig.config.json

有些人不一定是这两个文件，但大同小异。这方面只需要了解个大概即可。
tsconfig.json文件:

{//继承的文件,可以去node_modules中找到tsconfig.web.json,里面有一堆配置,最终会将该文件和tsconfig.web.json文件进行集成。//tsconfig.web.json中将一些公共的并且不需要被普通人看到的配置隐藏了起来。"extends": "@vue/tsconfig/tsconfig.web.json",//表示需要编译的文件"include": ["src/**/*", "src/**/*.vue", "env.d.ts"],"compilerOptions": {"baseUrl": ".","paths": {//这个别名是为了vscode提示的,和vite.config.ts中的配置别名不一样"@/*": ["./src/*"]}},//引入的文件"references": [{//之后不建议在tsconfig.json中修改配置，建议在tsconfig.config.json中修改配置文件"path": "./tsconfig.config.json"}]
}

tsconfig.config.json文件:

{//tsconfig.node.json用于SSR，SSR是基于node的;同时tsconfig.node.json可以用于对vite.config.*等进行编译"extends": "@vue/tsconfig/tsconfig.node.json","include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],"compilerOptions": {"composite": true,"types": ["node"]}
}

看起来确实有点绕，原因是这些东西被拆分的太细了。但这样子粒度就很精细，至于这个是否是“过度封装”，就是仁者见仁智者见智了。

13.文件.eslintrc.cjs和文件.prettierrc.json

这个里面的配置比较复杂，详细说明见后续文章https://blog.csdn.net/fageaaa/article/details/145474065。