vue-admin-template的目录说明，下载和运行的指令

目录

前言

下载运行体验

目录说明​

src下的关键文件的运行机制

 api/user.js中的代码分析

---

前言

vue-admin-template是vue-element-admin的一个子系统，提供了后台管理系统最关键的框架部分，适合在这个基础上做二次开发

• 基于 vue 和 element - ui实现

• 内置 国际化解决方案，动态路由，权限验证

• 提炼了典型的业务模型

• 有很多的功能组件

• 内部集成了PC项目中很多的业务场景和功能

vue-element-admin提供了很多现成的方案，可以在写项目的时候参考

下载运行体验

$ git clone https://gitee.com/panjiachen/vue-admin-template.git # 从码云拉取代码 
$ cd vue-admin-template #切换到具体目录下
$ npm install  #安装所有依赖
$ npm run dev  #启动开发调试模式  查看package.json文件的scripts可以查看启动命令

目录说明​

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据，在接口服务器没有就绪时，临时充当接口
├── public                     # 静态资源
│   ├── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   └── ├── user.js            # 与用户相关的请求 
│   ├── assets                 # 主题 字体等静态资源  不会参与打包  直接直出
│   ├── components             # 全局公用组件 和业务不相关  上传组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout 负责搭建项目的整体架子结构 html结构
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理 vuex管理数据的位置 模块化开发 全局getters
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法 request.js
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面 路由级别的组件
│   ├── App.vue                # 入口页面 根组件
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintignore              # eslint 忽略文件
├── .eslintrc.js               # eslint 配置项
├── .gitignore                 # git 忽略文件
├── .travis.yml                # 自动化CI配置
├── .babel.config.js           # babel-loader 配置
├── jest.config.js             # 测试配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

src下的关键文件的运行机制

 api/user.js中的代码分析

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/vue-admin-template/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/vue-admin-template/user/logout',
    method: 'post'
  })
}

上面代码中使用了封装的request工具，每个接口的请求都单独导出了一个方法，这样做的好处就是：

1. 每一个文件就是一个业务对应的所有服务请求接口汇总，清晰明了，查找方便 （方便维护）

2. 任何一个业务组件中如果想使用哪个接口直接导入即可 （方便复用）

3. 语义化清晰，维护方便 （命名即注释）

4. 分工合作

示意图：