vue-admin-template 学习笔记 汇总

ps

一个后端闲来无事的瞎折腾，vue的学习过程

vue基础学习

学习网站

vue.js

菜鸟编程

vue-admin-template

学习网站

框架基础学习 手摸手，带你用vue撸后台 系列

2020-12-15 02:01:19 快速一刷 似懂非懂(其实就是什么也看不懂) 直接上手 调试加百度 手撕源码

前端结构

├── build                      // 构建相关  
├── bin                        // 执行脚本
├── public                     // 公共文件
│   ├── favicon.ico            // favicon图标
│   └── index.html             // html模板
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── layout                 // 布局
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // css样式
│   ├── utils                  // 全局公用方法
│   ├── views                  // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   ├── permission.js          // 权限管理
│   └── settings.js            // 系统配置
├── .editorconfig              // 编码格式
├── .env.development           // 开发环境配置
├── .env.production            // 生产环境配置
├── .env.staging               // 测试环境配置
├── .eslintignore              // 忽略语法检查
├── .eslintrc.js               // eslint 配置项
├── .gitignore                 // git 忽略项
├── .travis.yml                // travis.yml
├── babel.config.js            // babel.config.js
├── package.json               // package.json
└── vue.config.js              // vue.config.js

运行顺序分析

gitee源码地址 后续版本删除了console 日志

1. 基础分析

**通过基础分析大概知道了文件的普通构成和打包方法**

1. src/App.vue 入口页面

   1. 被 src/main.js 引用

2. 通过webstorm ait+F7 查找使用方法得知 依次被引用

   1. 被 vue.config.js 引用
   2. 被 build/index.js 引用
   3. 被 package.json 引用
   4. “preview”: “node build/index.js --preview”,

3. src/settings.js 设置界面

   1. src/store/modules/settings.js
      1. src/store/index.js
   2. src/utils/get-page-title.js
      1. src/permission.js

2. 猜测分析

通过此段可以分析出 加载方法和加载顺序

• 先加载import 引入的 js 文件
• 后加载该文件 日志后打印

1. 进入 src/store/modules/user.js 调整引入文件顺序

console.info('src/store/modules/user.js');

import { login, logout, getInfo } from '@/api/user';
import { getToken, setToken, removeToken } from '@/utils/auth';
import { resetRouter } from '@/router';

变为

console.info('src/store/modules/user.js');

import { resetRouter } from '@/router';
import { login, logout, getInfo } from '@/api/user';
import { getToken, setToken, removeToken } from '@/utils/auth';

2. 窗口打印顺序

原日志

src/App.vue 入口页面
src/api/user.js 引用请求     
src/router/index.js 全局路由
src/store/modules/user.js
src/settings.js  设置界面
src/store/modules/settings.js
src/store/index.js 全局 store管理
src/utils/get-page-title.js
permission.js 权限控制
main.js 入口加载组件初始化等
public/index 公共文件html模板

日志变化

src/App.vue 入口页面
src/router/index.js 全局路由	// 这里顺序发生了变化
src/api/user.js 引用请求		// 这里顺序发生了变化	
src/store/modules/user.js
src/settings.js  设置界面
src/store/modules/settings.js
src/store/index.js 全局 store管理
src/utils/get-page-title.js
permission.js 权限控制
main.js 入口加载组件初始化等
public/index 公共文件html模板

3. 得出结论

基本可以得出不太成熟的结论

1. 网络请求 index.html 挂载 #app
2. main.js 入口加载 组件初始化等
3. 根据main.js内引入顺序加载 如果加载的js文件 有加载其他js文件 那么 先加载他引入的文件 以此类推

结构分析

1.登录实现

src/views/login/index.vue 
	点击登录 调用 handleLogin()
	this.$refs.loginForm.validate // 验证表单成功进行提交 失败则error
	this.$store.dispatch('user/login', this.loginForm) // 提交到store 的 user/login 地址
src/store/index.js
	 modules: {app, settings,user},getters
src/store/modules/user.js
	import { login, logout, getInfo } from '@/api/user';
src/api/user.js
    通过login 方法调用 src/api/user.js 的login 方法 去请求对应的地址
mock/user.js
    最后指向 mock/user.js // 这里访问的是模拟的api 

2.布局实现

侧边栏实现 src/layout

后面的基本以此类推，大同小异

功能说明

1. 权限管理

src/permission.js 作用 : 控制所有请求