从0开始学开发，Vue+Flask项目上手记录系列（一）：项目介绍

从0开始学开发，Vue+Flask项目上手记录系列（一）：项目介绍

本人从0基础接手全栈项目学习并跑通，中途补齐多种基础知识，解决众多bug。与此同时拿源项目源代码讲解的帖子很少，并且由于学习之初多种bug等问题并不能从网上查找解决，所以借此机会重温一下当时的基础知识和出现问题，对于也出现过类似问题的朋友们提供一些方法思路，对于像我当时一样的小白提供一些学习的思路和学习路线，共同进步！

一. 项目介绍及基本知识

本项目是实验室继承来的项目，前端采用Vue框架，主要技术栈包括HTML，css，js。后端使用Flask框架。

1.前端项目介绍

对于前端而言，相信很多朋友虽说跟着b站的课程学过敲过相关html等的代码，但是接手实际项目还是比较生疏，所以说还是拿实际项目上手做学起来比较快。以下为前端工程项目源代码文件列表：

1.idea文件夹

在前端Vue项目中，.idea 文件夹通常是由自动生成的。这个文件夹包含了用来存储项目配置信息的文件，如下图，对于我们学习者，可以忽略（目前来说）。

2.dist文件夹

Vue项目中的dist文件夹是用于存放项目打包后的静态文件的文件夹。当使用Vue-cli或者其他打包工具将Vue项目打包时，会生成一个dist文件夹，里面包含了打包后的HTML、CSS、JavaScript等文件。
在开发阶段，我们通常会在src文件夹中编写和存放我们的代码文件，而dist文件夹则是在项目构建完成后生成的，用于部署和发布项目。在dist文件夹中的静态文件可以直接上传到服务器上，供用户访问。

dist文件夹中的静态文件一般包括以下几个重要的文件或文件夹：
CSS文件：dist文件夹中会生成一个或者多个CSS文件，包含了项目中所有的样式代码。
图片和字体文件： 项目中使用的图片和字体文件也会被打包到dist文件夹中。
js文件： dist文件夹中会生成一个或者多个JavaScript文件，包含了项目中的逻辑代码和组件代码。
index.html： 这是项目的入口文件，用户访问网站时会加载此文件，其中引用了打包后的CSS和js等资源文件。
总的来说，dist文件夹是项目打包后的产物，是用于部署和发布项目的文件夹，其中包含了项目的HTML、CSS、JavaScript、图片等各种资源文件。可以将dist文件夹中的静态文件部署到服务器上，供用户访问。

3.node_modules文件夹

node_modules 文件夹是 Node.js 项目的专有文件夹，它包含了项目所依赖的所有第三方库和模块。当你使用 npm（Node Package Manager）或 yarn 等包管理器安装依赖时，这些依赖就会被下载并存储在这个文件夹中（一般占用内存较大）。
(后边还有众多包)

4.public文件夹

public 文件夹通常用于存放静态资源，这些资源不需要通过构建工具进行处理，可以直接被 Web 服务器提供给客户端。

5.src文件夹

src文件夹存放该项目的所有代码部分。

6.其余文件配置

eslintignore： 这个文件用于指定 ESLint 应该忽略检查的文件和目录。ESLint 是一个流行的 JavaScript 代码质量和代码风格检查工具。
eslintrc.js： 这个文件是 ESLint 的配置文件，用于定义项目的代码检查规则。可以在这里设置各种规则，以确保代码的一致性和质量。
babel.config.js： 这个文件是 Babel 的配置文件，Babel 是一个 JavaScript 编译器，用于将新的 JavaScript 语法转换为向后兼容的版本，以便在旧的浏览器或环境中运行。
package-lock.json： 这个文件由 npm 生成，用于锁定项目依赖的确切版本，确保项目在不同环境下的一致性。它包含了安装的每个包的版本信息，以及这些包的依赖关系。
package.json： 这个文件是 Node.js 项目的配置文件，包含了项目的基本信息，如项目名称、版本、描述、作者、依赖项、脚本等。启动项目，打包项目，检查项目的运行命令写在其中。
README.md： 介绍项目。
vue.config.js： 这个文件是 Vue CLI 项目的配置文件，用于自定义 Vue CLI 的默认配置。