目录
利用pnpm创建vue3的文件
1.打开cmd,以管理员的身份运行
2.切换到自己想要建立项目的文件的目录下或者直接在文件中以cmd的形式打开
输入指令安装pnpm
npm install -g pnpm
结果为
使用pnpm创建项目
输入
pnpm create vue输入指令后出现
根据提示输入项目名称，包名（需要小写）
因为含有了ESlint的插件，则无需勾选eslint和prettier
如果勾选了eslint和prettier，则应该这样选
依次将
复制并运行
出现改页面则项目建立成功，可以在文件相应位置查看创立的文件。
项目配置
1.点击左上角的三条横线，点击文件，再点击打开文件夹，找到我们新创立的文件夹打开
2.删除不用的组件
将assets,components,stores,views中的文件清空。
3.打开App.vue，将组件中的内容修改为
4.打开终端，再打开GitBash
5.安装hushy（如果选择了ESlint和Prettier)
依次输入指令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm lint-staged修改husky/pre-commit中的内容为
git init
pnpm dlx husky-init && pnpm install
git add .
pnpm i lint-staged -D
git commit -m '描述性信息'配置package.json
{
// ... 省略 ...
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
}
}
{
"scripts": {
// ... 省略 ...
"lint-staged": "lint-staged"
}
}6.安装sass依赖
pnpm add sass -D7.构建用户仓库和持久化-Pinia
pnpm add pinia-plugin-persistedstate -D在main.js中导入pinia
在stores中创建一个user.js文件
// 从pinia库中导入defineStore函数，用于定义一个新的store
import { defineStore } from 'pinia';
// 从vue库中导入ref函数，用于创建一个响应式引用
import { ref } from 'vue';
// 定义一个名为useUserStore的store，用于管理用户相关的状态
export const useUserStore = defineStore(
// store的唯一标识符，通常用于调试和持久化
'user',
// 一个函数，返回一个包含state和actions的对象
() => {
// 使用ref创建一个响应式的token变量，初始值为空字符串
const token = ref('');
// 定义一个设置token的函数，该函数接收一个参数t，并将其赋值给token.value
// 这样做可以确保token是一个响应式引用，并且当它的值改变时，任何依赖于它的Vue组件都会重新渲染
const setToken = (t) => (token.value = t);
// 返回包含token和setToken的对象，这样它们就可以在store的外部被访问和使用了
return { token, setToken };
},
// store的配置对象，这里启用了持久化功能
{
// 设置persist为true以启用持久化，这意味着store的状态将在页面刷新或重新加载时被保存和恢复
// 注意：这里只是简单地启用了持久化，但没有指定具体的持久化策略（如存储位置、密钥等）
persist: true // -->持久化
}
// 注意：上面的代码示例中，直接使用{ persist: true }可能不会按预期工作，
// 因为Pinia本身并不直接支持持久化配置。持久化通常是通过插件（如pinia-plugin-persistedstate）来实现的。
// 因此，需要先安装该插件，并在Pinia配置中正确地使用它。
);8.安装axios(数据交互)
pnpm add axios9.配置element-ui组件，依次输入指令
pnpm install element-plus
pnpm add element-plus
pnpm add -D unplugin-vue-components unplugin-auto-import在main.js中全局导入
vue3就配置完成，前端部分基本配置好了.
在idea中创建Spring Boot项目
1.建立spring boot项目，按如下所选
勾选spring boot
点击pom.xml打开编辑启动器选择依赖项
配置基础项目架构(三层架构)
创立如下三层架构
控制器层(controller):用来接受前端发送的请求，对请求进行处理，并响应数据
服务层(service):主要处理业务逻辑,它介于控制器层和数据访问层之间。通过定义服务层接口 和实现类 Impl，可以清晰地分离接口定义和具体实现，同时利用 MyBatis-Plus 提供的通用方法，减少重复代码，提高开发效率。因为使用MyBatis-Plus，需加入依赖
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.10.1</version>
</dependency>Dao层（mapper):数据访问层，主要与数据库相关，负责数据访问操作
实体类（POJO):定义实体类，用于映射数据库中的 表。使用了 MyBatis-Plus 提供的注解来指定表名、字段名以及主键生成策略。
在pojo中封装一个响应类Reasult,用于封装 API 的响应结果。
package com.exercise.mybatisplus.pojo;
public class Result {
private Integer code; // 1=成功, 0=失败
private String msg; // 响应信息
private Object data; // 返回数据
public Result() {
}
public Result(Integer code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
// 成功（无数据）
public static Result success() {
return new Result(1, "success", null);
}
// 成功（带数据）
public static Result success(Object data) {
return new Result(1, "success", data);
}
// 失败
public static Result error(String msg) {
return new Result(0, msg, null);
}
//Get和Set方法
}后端的基本配置就配好了，后面主要就是创建数据库并连接和利用apifox测试。
更详细的web项目构建请跳转最新初学者入门JavaWeb——后端_如何做第一个后端java开源项目-CSDN博客