Pure Admin 保姆级文档（已兼容最新版v5.8.0）
1.如果您还没安装 pnpm，请执行下面命令进行安装 npm install -g pnpm
2.安装依赖 pnpm install
3.启动 pnpm dev
登录背景图片的修改
修改登录验证规则(只留了为空提示，我是把这文件再login的引入和这个文件夹删了，添加自己的规则)
如果删除他的规则之后别忘了删除下面的判断
配置代理
proxy: {"/api": {// 这里填写后端地址target: "http://127.0.0.1:3000",changeOrigin: true,rewrite: path => path.replace(/^\/api/, "")}
}
登陆页面我把登录修改为了自己的判断然后执行他的，准备登陆成功后修改图片名字等路径
<script setup lang="ts">
import Motion from "./utils/motion";
import { useRouter } from "vue-router";
import { message } from "@/utils/message";
import { loginRules } from "./utils/rule";
import { useNav } from "@/layout/hooks/useNav";
import type { FormInstance } from "element-plus";
import { useLayout } from "@/layout/hooks/useLayout";
import { useUserStoreHook } from "@/store/modules/user";
import { initRouter, getTopMenu } from "@/router/utils";
import { bg, avatar, illustration } from "./utils/static";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";
import Lock from "@iconify-icons/ri/lock-fill";
import User from "@iconify-icons/ri/user-3-fill";
import axios from "axios";
defineOptions({name: "Login"
});
const router = useRouter();
const loading = ref(false);
const ruleFormRef = ref<FormInstance>();const { initStorage } = useLayout();
initStorage();const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
dataThemeChange(overallStyle.value);
const { title } = useNav();const ruleForm = reactive({username: "16638522031",password: "123456789"
});const onLogin = async (formEl: FormInstance | undefined) => {axios({url: "/fastapi/member/login",method: "post",data: { account: ruleForm.username, password: ruleForm.password }}).then(res => {console.log(res.data);if (res.data.code !== 1) return message(res.data.msg, { type: "error" });if (!formEl) return;loading.value = true;useUserStoreHook().loginByUsername({account: ruleForm.username,password: ruleForm.password}).then(res => {console.log(res);if (res.success) {// 获取后端路由return initRouter().then(() => {router.push(getTopMenu(true).path).then(() => {message("登录成功", { type: "success" });});});} else {message("登录失败", { type: "error" });}}).finally(() => (loading.value = false));});
};/** 使用公共函数，避免`removeEventListener`失效 */
function onkeypress({ code }: KeyboardEvent) {if (["Enter", "NumpadEnter"].includes(code)) {onLogin(ruleFormRef.value);}
}onMounted(() => {window.document.addEventListener("keypress", onkeypress);
});onBeforeUnmount(() => {window.document.removeEventListener("keypress", onkeypress);
});
</script><template><div class="select-none"><img :src="bg" class="wave" /><div class="flex-c absolute right-5 top-3"><!-- 主题 --><el-switchv-model="dataTheme"inline-prompt:active-icon="dayIcon":inactive-icon="darkIcon"@change="dataThemeChange"/></div><div class="login-container"><div class="img"><component :is="toRaw(illustration)" /></div><div class="login-box"><div class="login-form"><avatar class="avatar" /><Motion><h2 class="outline-none">{{ title }}</h2></Motion><el-form ref="ruleFormRef" :model="ruleForm" size="large"><Motion :delay="100"><el-form-item prop="username"><el-inputv-model="ruleForm.username"clearableplaceholder="账号":prefix-icon="useRenderIcon(User)"/></el-form-item></Motion><Motion :delay="150"><el-form-item prop="password"><el-inputv-model="ruleForm.password"clearableshow-passwordplaceholder="密码":prefix-icon="useRenderIcon(Lock)"/></el-form-item></Motion><Motion :delay="250"><el-buttonclass="w-full mt-4"size="default"type="primary":loading="loading"@click="onLogin(ruleFormRef)">登录</el-button></Motion></el-form></div></div></div></div>
</template><style scoped>
@import url("@/style/login.css");
</style><style lang="scss" scoped>
:deep(.el-input-group__append, .el-input-group__prepend) {padding: 0;
}
</style>
注释无用路由
mock文件夹注释路由
剩下的就添加页面，注册路由吧
