携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情
vue3+ts的admin管理系统代码分析 这是一个非常好的开源项目，好多同学们不知道怎么看完整的一个大型项目，这里我分享一下我自己看这个项目的方法和步骤。
首先看一个项目之前要下载下来并成功运行这个项目。我用的是WebStrom编辑器（学生可以白嫖）。具体方法自行官网或百度查看，第一个命令在终端运行 yarn install 。 然后打开package.json文件可以查看到具体的运行命令，yarn serve:dev 等待服务运行完毕终端会显示地址，在浏览器打开即可。这个项目进去就是登录页面。
登录调用的接口数据由mock模拟，在项目中的mock文件夹中，运行yarn mock即可运行mock数据服务。这样点击登录就可以成功请求了。然后就可以看到首页了。
成功运行之后我们要看一下项目目录结构了，这里时readme文档中给出的目录结构。
目录结构
admin-tmpl
├─ .env.dev.build # 开发环境
├─ .env.dev.serve # 开发本地本地
├─ .env.prod.build # 生产环境
├─ .env.prod.serve # 生产环境本地
├─ .env.test.build # 测试环境
├─ .env.test.serve # 测试环境本地
├─ .eslintrc.js # eslint
├─ README.md
├─ dist # 打包dist
├─ mock # mock服务
├─ public # 静态资源
├─ src # 源码
│ ├─ @types # ts 声明
│ ├─ apis # 接口请求
│ ├─ assets # webpack打包的资源
│ ├─ components # 公共组件
│ ├─ config # 全部配置
│ ├─ constant # 常量
│ ├─ directives # 全局指令
│ ├─ layout # 全局Layout
│ ├─ locales # 国际化
│ ├─ model # 全部model存放
│ ├─ plugins # 插件
│ ├─ router # 路由
│ ├─ store # 全局store管理
│ ├─ styles # 全局样式
│ ├─ utils # 全局公共方法
│ └─ views # 所有业务页面
├─ tsconfig.json # ts 编译配置
└─ vue.config.js # vue-cli 配置
接下来就是分析第一步，登录页面在哪里？怎么加载出来的？路由怎么找到的？ 我们知道路由都存在router文件夹里，这个项目中的router中我发现router中是没有显示出login页面的，它是在src目录下main.js文件中引入的permission.ts文件中看到一个守卫路由。permission的意思就是鉴权。很容易理解，就是来获取登录状态的。
