总结构#

我们先来看一个vue基础项目的文件结构 vue文件夹

分类#

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

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

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

src文件夹#

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

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

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

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

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

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

最后#

首先很多文件夹因为本人能力有限可能也很重要但是没提到这里推荐把文件夹名译成中文看看 大多数情况就能理解是用来干嘛的了(可能吧)
相信你也发现很多文件其实对应的就是一大块的前端知识所以一定程度上你可以依据你的项目文件夹(或者可以看看别人的项目) 进行一块一块的学习