来源：黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）_哔哩哔哩_bilibili
前后端混合开发：
需要使用前端的技术栈开发前端的功能，又需要使用Java的技术栈编写后端的实现，还需要操作数据库。
前后端分离开发：
当前最为主流的开发模式：前后端分离。将项目拆成两个部分：一个为前端工程，一个为后端工程。
两者之间需要交互：
在前端工程中发起异步请求，来请求后端工程。
后端工程接收到请求，对请求进行处理，再给前端工程返回一个响应结果。
为了能正常的交互，在开发的时候必须遵循接口文档。
YApi
介绍：YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
地址： http://yapi.smart-xwork.cn/
前端工程化
前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
环境准备
介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。
Vue-cli提供了如下功能：
-
统一的目录结构
-
本地调试
-
热部署
-
单元测试
-
集成打包上线
依赖环境：NodeJS
依赖环境：NodeJS
安装NodeJS
验证NodeJS环境遍历
node -v配置npm的全局安装路径：使用管理员身份运行命令行，在命令行中，执行如下指令
npm config set prefix "E:\develop\NodeJS" // 最后“”里面是NodeJS的安装路径切换npm的镜像
npm config set registry https://registry.npmmirror.com安装 vue-cli
npm install -g @vue/cli
Vue项目简介
Vue项目-创建
-
命令行：
vue create vue-project01 -
图形化界面：
vue ui
Vue项目-目录结构
-
基于Vue脚手架创建出来的工程，有标准的目录结构，如下：
Vue项目-启动
-
方式一：图形化界面
-
方式二：命令行 npm run serve
Vue项目-配置端口
打开vue.config.js，增加devServer配置：
再重新启动，会发现端口号改变：
Vue项目开发流程
Vue的组件文件以 .vue结尾，每个组件由三个部分组成：<template> 、<script>、<style> 。
