來源：黑馬程序員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> 。
