前后端分离开发 和 前端工程化

来源：黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）_哔哩哔哩_bilibili

前后端混合开发：

需要使用前端的技术栈开发前端的功能，又需要使用Java的技术栈编写后端的实现，还需要操作数据库。

前后端分离开发：

当前最为主流的开发模式：前后端分离。将项目拆成两个部分：一个为前端工程，一个为后端工程。

两者之间需要交互：

在前端工程中发起异步请求，来请求后端工程。

后端工程接收到请求，对请求进行处理，再给前端工程返回一个响应结果。

为了能正常的交互，在开发的时候必须遵循接口文档。

YApi

介绍：YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务

地址： http://yapi.smart-xwork.cn/

前端工程化

前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

环境准备

介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。

Vue-cli提供了如下功能：

• 统一的目录结构

• 本地调试

• 热部署

• 单元测试

• 集成打包上线

依赖环境：NodeJS

依赖环境：NodeJS

1. 安装NodeJS

2. 验证NodeJS环境遍历

   node -v

3. 配置npm的全局安装路径：使用管理员身份运行命令行，在命令行中，执行如下指令

   npm config set prefix "E:\develop\NodeJS" // 最后“”里面是NodeJS的安装路径

4. 切换npm的镜像

   npm config set registry https://registry.npmmirror.com

5. 安装 vue-cli

   npm install -g @vue/cli

Vue项目简介

Vue项目-创建

1. 命令行：

   vue create vue-project01 

2. 图形化界面：

   vue ui

Vue项目-目录结构

• 基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

  

Vue项目-启动

1. 方式一：图形化界面

   

1. 方式二：命令行 npm run serve

   

Vue项目-配置端口

打开vue.config.js，增加devServer配置：

再重新启动，会发现端口号改变：

Vue项目开发流程

Vue的组件文件以 .vue结尾，每个组件由三个部分组成：<template> 、<script>、<style> 。