原文地址：从前端到前端框架 - Pleasure的博客
下面是正文内容：
前言
这是一篇笔记，主要用于帮助刚入门Web全栈不久的同学。以及个人思路的记录整理。
如果你是一个全栈大师就可以直接跳过了。当然想加深一下理解也没有问题。
可能会较多谈谈我的个人见解。
大家点个关注收藏一下。
正文
前端框架的诞生
要成为一个计算机全栈开发工程师，下面的路线基本上是必不可少的。
学习计算机软件应用网页编辑，基本上都是先从前端的HTML，CSS，以及JavaScript开始，以PHP语言为辅辅助语言（后端）。
PHP作为一种服务器端脚本语言，自1994年开发以来，因为开源简单易用而广受欢迎。支持表单提交数据库连接等功能，所以非常适合用来编写一些简单的动态网页，以及帮助初学者加深对Web应用程序和网站开发的理解。
然而，PHP语言并不能满足复杂的或者是企业级应用系统的开发，所以在实际应用中使用的较少。
因为在实际应用中不难发现随着网站需要引入的元素增多，需要定义的标签和属性也成倍地增多。这就会导致HTML，CSS，JavaScript等浏览器读取的网页结构文件更加的复杂，动则上千上万行，非常不利于后期的更新维护。
所以前端框架由此应运而生，当然前端框架主要包括Vue.js，React，Angular三种。
但是现在市场上的招聘还是以要求掌握Vue语言为主要趋势。
当然要成为Web全栈工程师，前后端都得兼顾，这也有利于对行业需求的理解。
算算涉足Web全栈领域有小半年也算入门了，至少能自己编写一些小项目，但是为了目前就业形势的需要，不得不开始涉足前端框架的范畴。
VUE中一些常见定义的扫盲
概念越来越抽象了，差点没理解……仅供大家参考，方便后续忘记定义的时候查阅。
Node.js： 是一个基于Chrome V8引擎的JavaScript运行环境，用于在服务器端运行JavaScript代码。它允许开发人员使用JavaScript构建服务器端应用程序。
Vue.js： 是一个用于构建用户界面的JavaScript框架，运行在浏览器中。Vue.js帮助开发人员构建动态且交互式的前端应用。由尤雨溪（Evan You）于2014年创建。
DOM（Document Object Model）：是一种编程接口，用于以树形结构表示文档，即网页的结构。提供了一种将文档解析为由节点（node）组成的树形结构的方式。
BOM（Browser Object Model）：是浏览器提供的一组对象，用于控制浏览器窗口和与用户交互。
npm（Node Package Manager）：是Node.js的包管理工具，广泛用于JavaScript生态系统中。类似于Linux系统中的apt，yum。
Vue CLI（Vue ***mand Line Interface）：是用于Vue.js项目的官方脚手架工具。Vue CLI提供了一系列命令和配置选项，用于快速搭建、开发和管理Vue.js项目，帮助开发者更高效地构建现代化的Web应用程序。
Webpack：是一个用于打包JavaScript应用程序的静态模块打包工具。Webpack将应用程序的各个模块打包成一个或多个 bundle，以便在浏览器中加载。
Vue项目文件夹下一些默认文件的作用：
-
src文件夹：-
App.vue文件 是整个应用的主组件，包含了应用的整体结构和布局。 -
main.js文件 是整个应用的 JavaScript 入口文件，初始化了 Vue 实例并挂载到 HTML 页面上。 -
***ponents文件夹 通常包含可复用的 Vue 组件，这些组件可以在应用的不同部分中被引用。 -
assets文件夹 用于存放应用中的静态资源，如图片、字体、CSS等。
-
-
public文件夹：-
index.html文件 是整个应用的入口 HTML 文件，它包含一个根节点用于挂载 Vue 应用。 - 一些不需要 webpack 处理的静态资源。
-
-
node_modules文件夹：包含了项目依赖的所有第三方 npm 模块。 -
package.json文件：是项目的配置文件，包含了项目的元数据、依赖信息、脚本命令等。 -
vue.config.js文件：是 Vue CLI 的配置文件，用于配置 webpack、代理、自定义路径别名等。
public文件夹和src文件夹下静态文件资源的区别：
public文件夹下的资源不会经过 webpack 的处理，不会被添加哈希值，直接复制应用，并且它们的路径在构建输出中会保持不变，即相对路径将被保留。一般用于不会被更新的资源比如说企业的logo，字体等。
src文件夹下的资源会被 webpack 进行处理，例如通过 url-loader 或 file-loader 将图片嵌入到 JavaScript 文件中或复制到构建输出目录作为模块。这些图片通常会被添加哈希值，以便实现缓存控制，避免浏览器缓存旧版本的文件。
总结一下，Vue作为网页前端一般配合Spring Boot后端（或者Express.js后端）进行使用，来开发企业级应用工程。
Spring中一些常见的定义扫盲
同样抽象的概念，只要知道大致关系和用途就差不多了吧……快被绕晕了。
Spring 是一个用于构建企业级应用的开源框架，它提供了广泛的基础设施支持和构建块，使得开发者能够更容易地设计、构建、测试和部署复杂的企业级应用。需要配置Java 运行时环境（JRE）或 Java 开发工具包（JDK），以及 Maven构建工具。
Maven（Apache Maven）：是一个用于构建和管理 Java 项目的强大工具。它提供了一种标准的项目结构、项目对象模型和一套插件，使得项目构建、依赖管理和项目报告等任务变得更加简单。
Project Object Model（POM）：项目对象模型，POM 是一个 XML 文件，包含了项目的元数据和配置信息。
P.S.:Ngnix作为反向代理服务器，一般用于Spring Boot的客户请求转发，处理静态资源等分流操作。内存消耗相对较低。
SSM 框架：是指 Spring + Spring MVC + MyBatis 框架的组合，它们是三个独立的开源框架，常常一起使用来构建 Java Web 应用程序。
Tomcat ：是一个开源的 Java 服务器，用于托管 Java Servlet、JavaServer Pages（JSP）和其他基于 Java 的 Web 应用程序。是 Apache 软件基金会的一个项目，也是目前最流行的 Java Web 服务器之一。
P.S.:Apache 是一个通用的 Web 服务器，支持多种语言和技术。但是Tomcat主要支持和处理 Java 相关的技术以及应用程序。
Spring 是一个基于 Java 的开发框架（工具集），Node.js 是一个基于 JavaScript 的运行时环境。
Spring Boot是Spring提供的一个子项目，专门用于快速构建Spring应用程序。Spring应用程序包括：Spring Framework核心工具，Spring Data用于数据获取，Spring AMQP用于消息传递，Spring Security用于认证授权，Spring Cloud用于服务管理。传统方式构建导入依赖项目配置繁琐，还可能会导致Java包冲突。
Spring Boot特性：起步依赖（Maven坐标——完成功能所需的所有坐标），自动配置（启动器依赖申明），内置了嵌入式的Web服务器（Tomcat——启动时非常的方便），不需要XML配置。
开始之前
环境搭建：执行接口文档中的big_event.sql脚本，准备数据库表。创建springboot工程，引入对应的依赖（web，mybatis，mysql驱动）。配置文件application.yml中引入mybatis的配置信息。创建包结构，并准备实体类。
正式开始创建工程
需要准备的软件以及环境。
Nodejs，JDK环境，以及软件应用IDEA。
具体的使用方式我已经在之前的博文中提及过了，可以参考下面的文章链接。
CSDN博客地址：
https://yiming1234.blog.csdn.***/article/details/136669437
https://yiming1234.blog.csdn.***/article/details/136120573
具体的操作步骤就等我下一篇文章吧。（没空写了）
尾声
后面打算会涉及系统项目的具体搭建步骤。
一个全栈工程师需要掌握的最基本的内容。
