一、项目概述
本项目是一个纯前端的后台管理模板，采用 Vue3、JavaScript 和 Element Plus 进行开发，旨在为开发者提供一个高效、便捷的后台管理系统前端开发基础框架，具备动态路由、面包屑导航以及多页面打开等实用功能，可大大提升开发效率和用户体验。
gitCode代码地址：https://gitcode.com/Jiaberrr/vue3-pc-template/overview,
gitee代码地址：https://gitee.com/zunyi-gabe/vue3-pc-template （简单版（除了框架啥也没有）请切到master分支）
演示地址1：https://vue3-pc-template.vercel.app/login演示地址2：https://env-00jxt0stsnl3-static.normal.cloudstatic.cn/index.html
二、环境准备
确保已安装 Node.js（建议版本 14 及以上）和 npm（通常随 Node.js 一起安装）。
三、项目安装与运行
- 克隆项目：从代码仓库将项目克隆到本地，使用命令 git clone https://gitcode.com/Jiaberrr/vue3-pc-template.git。
- 安装依赖：进入项目目录，执行 npm install，这将自动安装项目所需的所有依赖包，包括 Vue3、Element Plus 以及其他相关库。
- 启动项目：在终端执行 npm run dev，项目将启动一个本地开发服务器，默认访问地址为 http://localhost:5173，在浏览器中打开该地址即可看到项目的初始界面。
四、功能使用说明
1、登录
账号密码暂无限制，登录后会缓存token到会话，无token会自动跳转到登录页，可根据自己业务逻辑修改。
2、动态路由：
- 路由配置文件位于 src/router/index.js。可以在其中定义静态路由和动态路由，动态路由在router.beforeEach中判断添加。
router.beforeEach(async(to, from, next) => {const token = sessionStorage.tokenif(to.path !== '/login' && !token) {next('/login')}else {const authRouterStore = useAuthRouterStore()let {routerList} = authRouterStoreif(!routerList.length) {let dynamicRoutes = await getDynamicRoutes()// 动态添加路由let newRoutes = getAuthRouters(dynamicRoutes)authRouterStore.addRouterList(newRoutes)newRoutes.forEach(val => {router.addRoute(val)})next({ path: to.path })}else {next()}}
})2、 面包屑导航：
- 面包屑组件已在项目中进行了全局配置，在每个页面组件中，无需额外复杂操作，面包屑会根据当前路由的嵌套关系自动生成并展示，显示用户当前所在页面的层级路径，方便用户进行页面导航和操作流程回溯。
3、 多页面打开：
- 项目中通过 Element Plus 的 el-tag组件结合 Vue Router 的编程式导航实现了多页面打开功能。在需要打开新页面的操作逻辑中（如点击菜单），使用 this.$router.push() 方法打开新的路由页面，并将新页面的路由信息添加到 el-tag 的数据源中，实现多页面的切换和管理，用户可以方便地在多个打开的页面之间进行切换操作，同时每个页面的状态将被独立保存。
五、项目结构介绍
- src：
-
- components：通用组件目录，如按钮、表格、图标等自定义组件，可在整个项目中复用。
-
- router：路由相关配置和逻辑，包括动态路由设置。
-
- assets：静态资源，用于存放公共css样式、图片等文件。
-
- layout：通用框架，包括左侧菜单、面包屑、tag标签主体框架。
-
- views：各个页面视图组件，每个页面对应一个 Vue 组件文件。
-
- App.vue：根组件，是整个应用的入口点，用于全局布局和状态管理。
-
- main.js：项目的入口文件，进行 Vue 实例的创建和全局配置。
- public：存放公共资源，如 index.html 文件和静态图片等资源。
六、定制与扩展
- 样式定制：在 src/assets/cover目录下可以编写自定义的 CSS 样式文件，通过在 Vue 组件中引入这些样式文件来覆盖 Element Plus 的默认样式，实现项目的个性化界面设计。
- 功能扩展：开发者可以根据项目需求在已有功能模块上进行扩展，例如在 src/api 中添加新的接口请求函数，在 src/views 中创建新的页面组件，并在 src/router 中配置相应的路由信息，无缝接入到现有项目结构中，快速实现新的业务功能。
本项目为开发者提供了一个良好的后台管理系统前端开发起点，通过以上的使用说明，希望能够帮助大家快速上手并在实际项目中灵活运用，根据具体业务场景进行定制和扩展，打造出满足需求的高质量后台管理系统前端界面。
