在 IDEA 2024 创建 Vue 项目（保姆级）

一、 前后端分离

1. 简介

        前后端分离属于开发模式的一种。其核心思想是把前端项目（Node.js 实现的）和后端项目能够独立运行（前端开发和后端开发时可以完全独立，只需要按照接口文档进行开发即可。），前端项目在通过 Ajax 请求服务器端项目Restful接口实现数据交互。

        使用前后端分离模式的项目在项目组中往往配备前端工程师和后端工程师。后端工程师就是我们，对于我们来说，不需要在项目中编写页面了，写到控制器返回数据即可，最后把项目部署到服务器上。而前端项目中主要是一些 HTML、JavaScript、图片 等资源，如果希望能够独立运行就需要借助基于 Node.js 的一些前端框架。

2. 实现前后端分离的常用前端框架

        对于前端工程师来说常用的就是 Vue.js 和 React.js 和 angularJS。他们是前端工程师常用的三大框架。

1. Vue.js: 小巧，灵活，功能却很强大。在市场上占有率更高，属于成熟稳定的框架。在课程中讲解此框架，后面的项目的前端页面也是基于 Vue 实现。
2. React: 相比Vue.js更新一些，近几年有追赶Vue.js的架势。更适合做移动项目。
3. **AngularJS：**相比 Vue 更重一些。AngularJS 的学习成本高，比如增加了 Dependency Injection 特性，而 Vue.js 本身提供的 API 都比较简单、直观，在性能上，AngularJS 依赖对数据做脏检查，所以 Watcher 越多越慢。只有在一些大型项目中才可能被使用。

3. 前后端分离和动静分离

3.1 前后端分离:

        前后端分离软件架构方式。前端页面和服务端项目分别部署。

        前端html页面通过 ajax 调用后端的 restuful api 接口并使用 json 数据（不一定非要使用JSON，如果有更好的前后端通信方式也可以使用）进行交互。即后端提供数据接口，前端调用接口获得数据，获得的数据在前端进行处理。

3.2 动静分离:

        动静分离（项目部署方式）指“动态页面（JSP）”和静态页面分离开，部署到不同的地方。很多时候为了让页面访问速度更快，把原来的动态页面（JSP）转换为静态页面（HTML）（可以借助Nginx实现）访问时访问静态页面。

二、 Vue.js概述

1. 简介

        Vue 是一个渐进式（真正用到才引用）的 JavaScrip t框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，与现代化的工具以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. SPA介绍

        Vue.js 属于 SPA 一员。

        英文全称：Single Page Web Application ，SPA

        中文全称：单页 Web 应用。

        整个应用就一个页面，客户端页面通过与服务端的交互动态更新页面中内容。

2.1 优点

        符合前后端分离工作模式：单页面应用可以结合 Restful，符合前后端分离开发。

        良好的用户体验：应用没有页面跳转，全是局部刷新，整体页面更流畅。

        减轻服务器端压力：由于都是局部刷新对服务器压力更小。

        多平台共享：无论是移动端、电脑端都可以共享服务端接口。通过作用域传值就无法实现接口共享。

2.2 缺点

SEO 难度大 对于单页面应用在 SEO 搜索时可能页面搜索到的就是空的