对Geeker-Admin源码的学习记录

月鹿01

已于 2022-11-09 16:17:11 修改

阅读量2.8k

点赞数 2

分类专栏： Vue3学习文章标签：学习 vue.js typescript

于 2022-11-09 15:48:22 首次发布

本文链接：https://blog.csdn.net/Camplu_01/article/details/127750053

版权

Vue3学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、代码分析
二、第三方的使用
后续

前言

提示：这里是源码地址

Gitee源码链接
 Github源码地址

提示：以下是本篇文章正文内容

一、代码分析

1.main.ts

入口文件里都是一些注册，其中注册Icons涉及到了Obeject.keys()

// 注册element Icons组件
Object.keys(Icons).forEach(key => {
	app.component(key, Icons[key as keyof typeof Icons]);
});

同时还注意到as keyof typeof的存在，目前已知的作用是强制转换成Icons的键

参考文章：
Object.keys（）的详解和用法

2.App.vue

这里是使用了全局配置el-config-provider，作用为配置语言，文字间隔和全局组件大小；

	<el-config-provider :locale="i18nLocale" :button="config" :size="assemblySize">
		<router-view></router-view>
	</el-config-provider>

import { getBrowserLang } from "@/utils/util";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
// 配置element按钮文字中间是否有空格
const config = reactive({
	autoInsertSpace: false //官方指定配置
});
// element 语言配置
const i18nLocale = computed(() => {
	if (globalStore.language && globalStore.language == "zh") return zhCn; 
	if (globalStore.language == "en") return en;
	return getBrowserLang() == "zh" ? zhCn : en; //这里是写入util的获取浏览器默认语言
});
// 配置全局组件大小 (small/default(medium)/large)
const assemblySize = computed((): string => globalStore.assemblySize);

其中 getBrowserLang中使用了 .toLowerCase()方法，主要目的是把字符串转换为小写，以此来判断系统默认语言(navigator.language)。

参考文章：
toLowerCase()方法

3.route

一进入index.ts就可以看到AxiosCanceler的引用；@/api/helper这一部分是axios，目前还没看明白^问题①

import { AxiosCanceler } from "@/api/helper/axiosCancel";
const axiosCanceler = new AxiosCanceler();

然后就进入动态路由参数配置简介；

const router = createRouter({
	history: createWebHashHistory(), //hash模式
	routes: [...staticRouter, ...errorRouter], //路由;其中staticRouter是静态路由,默认进入login页;
	strict: false, //针对是否有斜杠，默认false
	scrollBehavior: () => ({ left: 0, top: 0 })
});

scrollBehavior当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用；其中在staticRouter里使用到了RouteRecordRaw[]；
再往下走就是路由守卫beforeEach,在路由跳转前触发,这一部分代码注释很详细了；在页面通过f5刷新或者路由跳转时，会先判断是否存在权限，如果没有则会通过请求获取权限；

参考文章：
react-router中的exact和strict
vue-router中scrollBehavior方法滚动行为的使用
 scrollBehavior利用缓存模式来实现回退记录
 基础路由里面增加开发者自定义属性 router.ts的RouteRecordRaw类型校验
 TS声明文件——declare module——.d.ts文件
 Vue路由守卫（导航守卫）及使用场景

二、第三方的使用

1.mitt库

/*  @/utils/mittBus  */
//定义
import mitt from "mitt";
const mittBus = mitt();
export default mittBus;

/* @/layouts/components/Header/components/ThemeSetting.vue  */
const openDrawer = () => {
	mittBus.emit("openThemeDrawer"); // 发送信息
};

/*  @/layouts/components/ThemeDrawer/index.vue  */
import mittBus from "@/utils/mittBus"; 
// 打开主题设置
const drawerVisible = ref(false);
mittBus.on("openThemeDrawer", () => (drawerVisible.value = true)); // 接收信息并做出反应

参考文章：
vue3全局事件总线mitt库

2.nprogress库

/*  @/config/nprogress  */
import NProgress from "nprogress";
import "nprogress/nprogress.css";

NProgress.configure({
	easing: "ease", // 动画方式
	speed: 500, // 递增进度条的速度
	showSpinner: true, // 是否显示加载ico
	trickleSpeed: 200, // 自动递增间隔
	minimum: 0.3 // 初始化时的最小百分比
});
export default NProgress;