总结构#

分类#

这里作为一个前端入门者 我们只需要知道哪些是我们需要用的 哪些是我们不需要的就行 所以我姑且将文件分为以下几类

1. src文件夹----你的源码存储处 主要的工作场所
2. 各类配置文件----如图中的 vite.config 当你需要配置一些东西的时候需要使用 偶尔使用
3. 其他各类文件----比如README.md 这个是用于在github中向用户介绍这个项目 几乎不碰

也就是说 在实际编程中 你大部分时间只需要在src中操作 偶尔在如XXX.js XXX.josn中配置一些东西 比如刚刚的vite.config在vue项目编写过程中 就可以用来配置跨域(简单来说就是填入你的后端的地址 帮你连上你的后端)

src文件夹#

那么 现在来具体介绍下src文件夹下的结构 能不能认清里面的文件结构对于写码体验有极大影响 (可不要成为文件瞎放的人呐)

以下放我的blog项目(一个astro项目)的文件配置 这里不同类型的项目下src里的东西会不一样 主要先认识下共有的一些东西

1. pages(vue中为views)字面意思 也就是存放前端项目的页面 比如 loign.vue ,register.vue… 每一个页面对应着一个项目中实际的页面
2. assets—静态资源存储 也就是图片之类的东西放里面 然后用来在前端页面里渲染出来
3. components—组件库 这里延伸一个组件的知识点(如果你不知道的话看一下)比如像我博客最上方的导航栏 就是一个组件 组件能够在不同的页面中复用 像我的blog的每个页面最上方都有导航栏 但是其实我的库里只有一份代码 可以说是一个前端项目的核心之一了
   也就是说 components中储存着各种各样的组件 大多项目中components中还有分文件夹 比如分为用来控制的组件等等 如果你对于这个概念非常不了解 推荐单独去了解下

以上是基础中的基础 什么项目中一定都会有的部分 接下来再说一些src常见的文件夹/文件夹

这里再贴个vue项目的src文件夹结构

1. router—vue中router功能的配置文件的储存位置 详细可以查一查vue中的router的相关信息
2. layout— 这里又牵引到一个嵌套结构 也就是说我们可以提前写一个大模板(比如一个layout.astro/layout.vue)用来复用性的写你想要配置的page的总布局 然后再在你正在写的那个page中引用这个模板 把内容丢到模板里