02vue3实战-----项目目录详解

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.youkuaiyun.com/fageaaa/article/details/145474065。