从0-1搭建一个web项目(路由目录分析)详解

本章分析vue路由目录文件详解

ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架。在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等功能。感兴趣的小伙伴可以访问源码点个赞 地址

在这里插入图片描述

先简单看一下目录结构

一个清晰、有序的项目结构对于项目的可维护性和可扩展性至关重要

├─ .husky                  # husky 配置文件
├─ .vscode                 # VSCode 推荐配置
├─ build                   # Vite 配置项
├─ public                  # 静态资源文件(该文件夹不会被打包)
├─ src
│  ├─ api                  # API 接口管理
│  ├─ assets               # 静态资源文件
│  ├─ components           # 全局组件
│  ├─ config               # 全局配置项
│  ├─ directives           # 全局指令文件
│  ├─ enums                # 项目常用枚举
│  ├─ hooks                # 常用 Hooks 封装
│  ├─ languages            # 语言国际化 i18n
│  ├─ layouts              # 框架布局模块
│  ├─ routers              # 路由管理
│  ├─ stores               # pinia store
│  ├─ styles               # 全局样式文件
│  ├─ typings              # 全局 ts 声明
│  ├─ utils                # 常用工具库
│  ├─ views                # 项目所有页面
│  ├─ App.vue              # 项目主组件
│  ├─ main.ts              # 项目入口文件
│  └─ vite-env.d.ts        # 指定 ts 识别 vue
├─ .editorconfig           # 统一不同编辑器的编码风格
├─ .env                    # vite 常用配置
├─ .env.development        # 开发环境配置
├─ .env.production         # 生产环境配置
├─ .env.test               # 测试环境配置
├─ .eslintignore           # 忽略 Eslint 校验
├─ .eslintrc.cjs           # Eslint 校验配置文件
├─ .gitignore              # 忽略 git 提交
├─ .prettierignore         # 忽略 Prettier 格式化
├─ .prettierrc.cjs         # Prettier 格式化配置
├─ .stylelintignore        # 忽略 stylelint 格式化
├─ .stylelintrc.cjs        # stylelint 样式格式化配置
├─ CHANGELOG.md            # 项目更新日志
├─ commitlint.config.cjs   # git 提交规范配置
├─ index.html              # 入口 html
├─ LICENSE                 # 开源协议文件
├─ lint-staged.config.cjs  # lint-staged 配置文件
├─ package-lock.json       # 依赖包包版本锁
├─ package.json            # 依赖包管理
├─ postcss.config.cjs      # postcss 配置
├─ README.md               # README 介绍
├─ tsconfig.json           # typescript 全局配置
└─ vite.config.ts          # vite 全局配置文件
————————————————

对目录进行详细的拆解分析 项目根目录

配置文件

  • .husky:包含Husky的配置文件,用于设置Git钩子,如pre-commit等,以自动化地执行代码格式化、测试等任务。
  • .vscode:存放VSCode编辑器的推荐配置,如代码片段、设置等,以便团队成员使用统一的编辑器设置。
  • .editorconfig:用于定义和维护跨编辑器和IDE的代码风格一致性。
  • .env, .env.development, .env.production, .env.test:Vite的环境变量配置文件,分别用于不同的环境(通用、开发、生产、测试),以便在不同环境下使用不同的配置。
  • .eslintignore, .eslintrc.cjs:ESLint的配置文件和忽略文件,用于代码质量和风格的检查。
  • .prettierignore, .prettierrc.cjs:Prettier的配置文件和忽略文件,用于代码格式化。
  • .stylelintignore, .stylelintrc.cjs:Stylelint的配置文件和忽略文件,用于CSS/SCSS等样式文件的格式化和质量检查。
  • commitlint.config.cjs:用于配置Git提交信息的规范,确保提交信息的一致性和可读性。
  • lint-staged.config.cjs:lint-staged的配置文件,用于在Git提交前自动运行linters。
  • tsconfig.json:TypeScript的配置文件,定义了项目中TypeScript的编译选项。
  • vite.config.ts:Vite的全局配置文件,用于配置项目的打包、开发服务器等选项。

通用文件和目录

  • CHANGELOG.md:项目的更新日志,记录每次版本更新的内容和变更。
  • LICENSE:项目的开源协议文件,如MIT、Apache等。
  • README.md:项目的README文件,介绍项目的用途、安装方法、使用说明等。
  • package-lock.json:依赖包版本锁文件,确保团队成员安装的依赖包版本一致。
  • package.json:项目的依赖包管理和脚本配置文件。
    开发目录
    构建和静态资源
  • build:存放Vite的特定配置文件或脚本(根据项目配置,此目录可能不常见)。
  • public:存放静态资源文件,如图片、favicon等,这些文件不会被Webpack等构建工具处理,而是直接复制到输出目录中。
    源代码
  • src:项目的核心源代码目录。
  • api:API接口管理目录,存放与后端交互的API请求代码。
  • assets:存放静态资源文件,但与public不同,这里的文件可能会通过- Webpack等构建工具处理(如图片压缩、字体转换等)。
  • components:全局组件目录,存放可复用的Vue组件。
  • config:全局配置项目录,存放项目的全局配置信息。
  • directives:全局指令文件目录,存放自定义的Vue指令。
  • enums:项目常用枚举目录,定义项目中常用的枚举类型。
  • hooks:常用Hooks封装目录,存放Vue Composition API的自定义Hooks。
  • languages:语言国际化i18n目录,存放项目的多语言资源。
  • layouts:框架布局模块目录,定义应用的布局结构。
  • routers:路由管理目录,定义Vue Router的路由配置。
  • stores:Pinia store目录,用于管理Vue应用的全局状态。
  • styles:全局样式文件目录,存放项目的全局样式文件。
  • typings:全局ts声明目录,存放TypeScript的类型声明文件。
  • utils:常用工具库目录,存放项目中常用的工具函数。
  • views:项目所有页面目录,存放Vue应用的页面组件。
  • App.vue:项目的主组件文件,Vue应用的根组件。
  • main.ts:项目的入口文件,用于挂载Vue应用并引入全局配置和插件。
  • vite-env.d.ts:TypeScript声明文件,用于指定TypeScript如何识别.vue文件。

分析main.js

上部分的一系列import就不说了,就是导入一些依赖和插件

下面这句是抛出一个未捕获的全局错误

app.config.errorHandler = errorHandler;

接下来就是循环注册全局组件

Object.keys(Icons).forEach(key => {
  app.component(key, Icons[key as keyof typeof Icons]);
});

分析路由

亿点小知识了路由的逻辑,才能更清楚的了解一个项目

分析routers/index.ts文件

const mode = import.meta.env.VITE_ROUTER_MODE;  //此处VITE_ROUTER_MODE是hash
const routerMode = {
  hash: () => createWebHashHistory(),
  history: () => createWebHistory()
};
 
const router = createRouter({
  history: routerMode[mode](),
  routes: [...staticRouter, ...errorRouter],
  strict: false,
  scrollBehavior: () => ({ left: 0, top: 0 })
});

1.history定义了路由模式,不懂得可以看下边

2.routes定义了静态路由,根据连接可以找到 modules/staticRouter.ts

3.strict:严格模式
scrollBehavior:切换新页面,定义页面的位置
4.路由守卫

  // 6.如果没有菜单列表,就重新请求菜单列表并添加动态路由
  if (!authStore.authMenuListGet.length) {
    await initDynamicRouter();
    return next({ ...to, replace: true });
  }

首先是异步加载initDynamicRouter方法,打开initDynamicRouter看看具体逻辑,位置在 modules/dynamicRouter.ts

第一部分是异步获取菜单权限列表和按钮权限列表。

const userStore = useUserStore();
const authStore = useAuthStore();

第二部分判断有没有权限,没有权限的话清除token,返回登录页并且抛出一个promist错误

 if (!authStore.authMenuListGet.length) {
      ElNotification({
        title: "无权限访问",
        message: "当前账号无任何菜单权限,请联系系统管理员!",
        type: "warning",
        duration: 3000
      });
      userStore.setToken("");
      router.replace(LOGIN_URL);
      return Promise.reject("No permission");
    }

第三部分就是加载动态路由,首先看一下authStore.flatMenuListGet是怎么来的,经过搜索发现是调用了如下的方法,位置在 stores/modules/auth

flatMenuListGet: state => getFlatMenuList(state.authMenuList),

继续深入查找getFlatMenuList方法

export function getFlatMenuList(menuList: Menu.MenuOptions[]): Menu.MenuOptions[] {
  let newMenuList: Menu.MenuOptions[] = JSON.parse(JSON.stringify(menuList));
  return newMenuList.flatMap(item => [item, ...(item.children ? getFlatMenuList(item.children) : [])]);
}

这一部分可能有同学看不懂,我来解释一下。

这部分主要就是递归将数组扁平化,扁平化的意思就是将多维数组转换成一位数组,类似这样:

[1,2,[3,4]] => [1,2,3,4]

具体是用过数组的flatMap方法来实现的,flatMap方法对数组中的每个元素应用给定的回调函数,然后将结果展开一级,返回一个新数组。

const arr = [1, 2, [3], [4, 5]];
const res = arr.flatMap(item => item);
console.log(res);  // [1,2,3,4,5]

由于flatMap每次只能展开一级,所以需要递归调用。

至此,就已经拿到了authStore.flatMenuListGet的数据。

接着往下走

item.children && delete item.children

这一句就是删除children,因为拿到的是扁平化的数组,所以删处多余的children。

接下来就是动态导入对应的component路径。
最后将路由添加到layout组件下。
至此,动态路由导入成功。

总结:

以上就是路由目录分析详解这个目录结构展示了一个现代Vue.js项目的典型布局,旨在提高项目的可维护性和可扩展性
在这里插入图片描述
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~!
关注收藏博客 作者会持续更新…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/790269.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue前端实现导出页面为word(两种方法)

将vue页面导出为word文档,不用写模板,直接导出即可。 第一种方法(简单版) 第一步:安装所需依赖 npm install html-docx-js -S npm install file-saver -S第二步:创建容器,页面使用方法 注意:在当前页面引…

对于多个表多个字段进行查询、F12查看网页的返回数据帮助开发、数据库的各种查询方式(多对多、多表查询、子查询等)。

对于多个表多个字段进行查询、F12查看网页的返回数据帮助开发、数据库的各种查询方式(多对多、多表查询、子查询等)。 一、 前端界面需要展现多个表的其中几个数据的多表查询。1. 三个表查询其中字段返回:(用一下sql语句&#xff…

论文翻译 | (TAKE A STEP BACK) 后退一步:在大型语言模型中通过抽象来调用推理

摘要 我们介绍了STEP-BACK提示,这是一种简单的提示技术,使LLM能够进行抽象,从而从包含特定细节的实例中派生高级概念和第一原则。使用概念和原则来指导推理,LLM显着提高了他们遵循正确推理路径的能力。我们使用PaLM-2L、GPT-4和Ll…

3102.力扣每日一题7/9 Java(TreeMap)

博客主页:音符犹如代码系列专栏:算法练习关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ 目录 TreeMap详解 解题思路 解题方法 时间复杂度 空间复杂度 Code T…

imx6ull/linux应用编程学习(16)emqx ,mqtt创建连接mqtt.fx

在很多项目中都需要自己的私人服务器,以保证数据的隐私性,这里我用的是emqx。 1.进入emqx官网 EMQX:用于物联网、车联网和工业物联网的企业级 MQTT 平台 点击试用cloud 申请成功后可得:(右边的忽略) 进入…

【读点论文】ASAM: Boosting Segment Anything Model with Adversarial Tuning,对抗学习提升性能

ASAM: Boosting Segment Anything Model with Adversarial Tuning Abstract 在不断发展的计算机视觉领域,基础模型已成为关键工具,对各种任务表现出卓越的适应性。其中,Meta AI 的 Segment Anything Model (SAM) 在图像分割方面表现突出。然…

国内从事人机交互的团队——浙江工业大学

一、背景 当我们选择一个新的课题后,需要清楚的了解从事该方向的团队都有哪些,这样可以及时跟踪和学习大牛团队的最新进展,以免自己认为的good idea,其实早就已经研究过了。 随着人形机器人的发展,机器人不仅需要在无…

vscode使用Git的常用操作

主打一个实用 查看此篇之前请先保证电脑安装了Git,安装教程很多,可自行搜索 一.初始化本地仓库🟢 使用vscode打开项目文件夹如图所使初始化仓库,相当于命令行的git init 二.提交到暂存区🟢 三.提交到新版本&#x1f…

python04——类(基础new)

类其实也是一种封装的思想,类就是把变量、方法等封装在一起,然后可以通过不同的实例化对其进行调用操作。 1.类的定义 class 类名: 变量a def __init__ (self,参数2,参数2...):初始化函数!!&…

Chromium编译指南2024 Linux篇-编译Chromium(五)

1.引言 在完成环境配置之后,我们需要开始实际的编译工作。编译 Chromium 是一个相对复杂且耗时的过程,尤其是第一次编译时。为了保证顺利完成,我们将使用 GN 和 Ninja 工具来生成和管理构建文件。接下来,我们会详细介绍如何生成构…

最新 Kubernetes 集群部署 + flannel 网络插件(保姆级教程,最新 K8S 版本)

资源列表 操作系统配置主机名IP所需插件CentOS 7.92C4Gk8s-master192.168.60.143flannel-cni-plugin、flannel、coredns、etcd、kube-apiserver、kube-controller-manager、kube-proxy、 kube-scheduler 、containerd、pause 、crictlCentOS 7.92C4Gk8s-node01192.168.60.144f…

【HarmonyOS】关于官方推荐的组件级路由Navigation的心得体会

前言 最近因为之前的630版本有点忙,导致断更了几天,现在再补上。换换脑子。 目前内测系统的华为应用市场,各种顶级APP陆续都放出来beta版本了,大体上都完成了主流程的开发。欣欣向荣的气息。 学习思路 关于学习HarmonyOS的问题…

浅谈化工厂环保管理的痛点、智慧环保的必要性及EHS系统的实现路径

在全球环保意识日益增强的背景下,化工厂作为工业领域的重要组成部分,其环保管理显得尤为重要。然而,化工厂在追求经济效益的同时,也面临着诸多环保管理的痛点。本文将围绕化工厂环保管理的痛点、化工厂为何需要智慧环保以及如何借…

Unity【入门】场景切换和游戏退出及准备

1、必备知识点场景切换和游戏退出 文章目录 1、必备知识点场景切换和游戏退出1、场景切换2、鼠标隐藏锁定相关3、随机数和自带委托4、模型资源的导入1、模型由什么构成2、Unity支持的模型格式3、如何指导美术同学导出模型4、学习阶段在哪里获取模型资源 2、小项目准备工作需求分…

小程序内容管理系统设计

设计一个小程序内容管理系统(CMS)时,需要考虑以下几个关键方面来确保其功能完善、用户友好且高效: 1. 需求分析 目标用户:明确你的目标用户群体,比如企业、媒体、个人博主等,这将决定系统的功…

Linux基础知识(十六)shell脚本编程

一、简介 用户通过shell向计算机发送指令计算机通过shell给用户返回指令的执行结果 1.1 通过shell编程可以达到的效果 提高工作效率可以实现自动化 1.2 需要学习的内容 Linuxshell的语法规范 1.3 编写shell的流程 第一步:用vi/vim创建一个.sh的文件第二步&am…

C++ 重载运算符 addition (+), subtraction (-) and multiplication (*)

C 重载运算符 addition , subtraction - and multiplication * 1. Operator Overloading (运算符重载)2. Developing an Operator Overloading Example2.1. Adding an Addition Operator (添加加法运算符)2.2. Overloading Restrictions (重载限制)2.3. 重载运算符 - 和 * Refe…

特征融合篇 | YOLOv10改进之在Neck网络中添加加权双向特征金字塔BiFPN

前言:Hello大家好,我是小哥谈。在计算机视觉任务中,特征金字塔网络(FPN)是一种常用的方法,它通过构建不同尺度的特征图来捕获不同尺度的目标。然而,传统的FPN存在一些缺点,如特征融合…

05STM32EXIT外部中断中断系统

STM32EXIT外部中断&中断系统 中断系统中断触发条件:中断处理流程和用途: STM32中断NVIC嵌套中断向量控制器基本结构 中断系统 中断触发条件: 对外部中断来说,可以是引脚发生了电平跳变 对定时器来说,可以是定时的…

【最强八股文 -- 计算机网络】【快速版】WWW 构建技术 (3 项)

1.HTML(HyperText Markup Language):作为页面的文本标记语言 2.HTTP(HyperTextTransfer Protocol):文档传递协议 3.URL(Uniform Resource Locator):指定文档所在地址 HTTPS 和 HTTP 的区别: HTTP: 以明文的方式在网络中传输数据,HTTPS 解决了HTTP 不安全的缺陷&…