VS Code的终端运行npm create vuelatest命令创建最简单的Vue3项目创建完成后的项目目录结构如下图所示每个文件夹的用途如下.vscode文件夹存放VS Code的项目级配置包括项目的推荐扩展、工作区设置、调试和任务配置node_modules文件夹存放项目所有依赖包由npm install根据package.json自动生成无需手动修改public文件夹存放静态资源其内的文件会被原样复制到最终的构建目录不会经过Vite的处理和编译适合存放不需要经过构建工具处理的文件。src文件夹存放主要项目源代码绝大部分代码都会放到这个文件夹内src\assets文件夹存放需要被Vite处理和编译的静态资源如 CSS文件、图片、字体等src\components文件夹存放可复用的Vue组件.vue文件通常是通用的UI部件可以被不同页面或其它组件引入使用src\App.vue文件Vue应用组件树的根组件通常负责最顶层的页面结构src\main.js文件整个Vue应用的JavaScript入口文件负责创建并启动应用.gitignore文件维护哪些文件或文件夹不需要提交到Git仓库index.html文件项目的主HTML入口文件Vite会以此为入口并自动注入构建后的资源链接jsconfig.json文件维护代码编辑器尤其是VS Code的JavaScript语言服务提升开发体验package.json文件维护项目名称、版本、运行脚本以及所有依赖包及其版本信息package-lock.json文件用于锁定整个依赖树包括间接依赖的精确版本确保何时、何地执行npm install都能得到完全相同的node_modules结构README.md文件维护项目说明包含项目介绍、安装和运行指南等vite.config.js文件Vite构建工具的配置文件控制Vue 3项目在开发服务器和生产构建两个阶段的核心行为。参考文献[1]https://cn.vuejs.org/guide/introduction.html[2]https://www.bilibili.com/video/BV1VSaA6EE7E[3]https://cloud.tencent.cn/developer/article/2602236?policyId1004#1#1[4]https://www.jb51.net/javascript/341898a6c.htm
