从前后端分离到前后端整合的“退步”（一）项目结构_前台后台前端后端分离开发项目结构-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45239621/article/details/122015845

系列文章目录

从前后端分离到前后端整合的“退步”（一）项目结构
 从前后端分离到前后端整合的“退步”（二）pom.xml文件配置

Spring Boot + Vue 使用Maven进行打包发布记录 -- 项目结构

系列文章目录
前言
本文只是构建项目结构，需要pom文件配置的可以移步系列文章第二篇
一、搭建父项目
二、构建后端子项目：backend
三、搭建前端子项目：frontend
四、整合一下父项目与前端子项目的关系
总结

前言

本文仅是针对笔者操作的一个记录，以便以后使用。也希望可以对更多的同好们有所帮助。
现在前后端分离十分流行，最近在有接触到了前后端一起使用Maven进行打为jar包的项目，于是今天进行实际的操作一下，以下是本次的记录。

众所周知Maven是一个项目管理工具，可以对 Java 项目进行构建、依赖管理。Maven 也可被用于构建和管理各种项目，例如 C#，Ruby，Scala 和其他语言编写的项目。那么我们也可以使用他构建一个前后端打包为一个jar包的项目。
使用的技术为 Spring Boot+Vue

本文只是构建项目结构，需要pom文件配置的可以移步系列文章第二篇

一、搭建父项目

idea的Maven构建项目界面
设置自己的项目的包结构和项目名
选择自己的Maven

然后一步一步往下走，直到
出现这个窗口
选择你想要新打开项目的方式
接下来项目的结构是这样的

二、构建后端子项目：backend

删除掉src目录
变成这样
在定级目录上右键选择进行新建Module
为区别命名，命名该项目为backend ：用于书写后端接口
可以明显看出没有能够设置其文件夹功能模块
进行设置
这样便是成功设置

三、搭建前端子项目：frontend

构建frontend：用于Vue前端项目的构建
在父项目目录下进行vue前端项目cmd窗口下的构建。
vue3.0项目搭建

安装vue-cli3.0

注意：vue3.0必须使用vue-cli3.0等以上版本

在桌面启动cmd命令窗口，执行下面命令，全局安装（可以先卸载之前的vue版本 npm uninstall vue-cli -g ）

npm install -g @vue/cli

查看版本

vue -V

开始vue3.0的项目创建

以搭建一个项目名称为my_test的Vue前端项目为例

vue create frontend

2.1. 根据项目提示进行相应的配置方式(以Manually select features手动配置为例)
在这里插入图片描述

2.2. 根据项目提示进行相应的配置方式(以Manually select features手动配置为例)
在这里插入图片描述
Eslint代码规范：不一定每个人都习惯，按个人需求来进行是否选择。

2.3.根据项目需要选择一些特性，比如此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、以及单元测试，暂时不考虑端到端测试(E2E Testing)）注意：通过上下键切换，空格键选中的方式进行选择
在这里插入图片描述
2.4.选择vue版本，此处选择vue 3.x

2.5.路由采用模式，这里采用历史模式

2.6.选择CSS预处理器语言，此处选择Sass/SCSS
2.7.配置Eslint代码规范，此处选择Standard（使用了代码更规范但是可以不习惯，按自己心情和习惯进行选择吧）
在这里插入图片描述
2.8.选择何时进行代码检测，此处选择在保存时进行检测

2.9.选择单元测试解决方案，此处选择 Jest

2.10.选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中