目录
前言
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工具,每个接口的请求都单独导出
了一个方法,这样做的好处就是:
-
每一个文件就是一个业务对应的所有服务请求接口汇总,清晰明了,查找方便 (方便维护)
-
任何一个业务组件中如果想使用哪个接口直接导入即可 (方便复用)
-
语义化清晰,维护方便 (命名即注释)
-
分工合作
示意图: