更好的了解项目的目录结构，能更好的去开发项目：
当前展示的目录结构是基于vite搭建的项目。
目录结构如下图所示：
我的代码是托管在我自己的git服务器上边的，默认安装的时候是不存在的。
1：dist目录
存放打包之后的代码文件
2：node_modules
存放项目依赖的包目录
3：public
存放公共文件目录
4：src
存放代码的主要目录
（1）：assets
我这里存放了每个页面对应的css、js以及图片文件
（2）：components
存放项目使用的公共组件
（3）：router
存放vue-router相关的文件
（4）：types
存放typescript 支持vue文件的相关配置文件
（5）：views
存放页面文件（.vue）
（6）：App.vue
根组件文件
（7）：main.ts
入口文件ts文件
// 引入vue3中vue框架的createApp这个方法，创建一个实例 import { createApp } from "vue"; import App from "/@/App.vue"; // 创建实例 const app = createApp(App); // 将示例挂载至节点 app.mount("#app");
5：.gitignore
Git相关文件，配置不上传至git库的文件，了解更多，请移步：《Git 忽略提交 .gitignore》
6：index.html
项目入口文件
7：package.json
存放依赖包管理及命令管理信息文件
（1）：scripts
"scripts": { "dev": "vite", "build": "vite build" },
这里是命令配置,我的项目时采用vite创建的，因此命令有vite
yarn dev yarn build
（2）：开发环境及生产环境
Dependencies：生产环境 devDependencies：开发环境
8：readme.md
使用markdown编写的文档文件
9：ts.config.json
Typescript的配置文件
10：vite.config.ts
项目配置文件
11：yarn.locak
使用yarn包管理生成的文件，由yarn自动生成，自动管理。不需要管。
|-node_modules -- 项目依赖包的目录 |-public -- 项目公用文件 |--favicon.ico -- 网站地址栏前面的小图标 |-src -- 源文件目录，程序员主要工作的地方 |-assets -- 静态文件目录，图片图标，比如网站logo |-components -- Vue3.x的自定义组件目录 |--App.vue -- 项目的根组件，单页应用都需要的 |--index.css -- 一般项目的通用CSS样式写在这里，main.js引入 |--main.js -- 项目入口文件，SPA单页应用都需要入口文件 |--.gitignore -- git的管理配置文件，设置那些目录或文件不管理 |-- index.html -- 项目的默认首页，Vue的组件需要挂载到这个文件上 |-- package-lock.json --项目包的锁定文件，用于防止包版本不一样导致的错误 |-- package.json -- 项目配置文件，包管理、项目名称、版本和命令
