vue-typescript-admin-template VUE后台管理系统模板

English | 简体中文

总览

vue-typescript-admin-template是一个后台前端解决方案，它基于vue,typescript和element-ui实现。原始的 Javascript 版本的代码是由 PanJiaChen开发维护的vue-element-admin，十分感谢大佬对开源社区做出的贡献 :)

如果你想从一个十分简单的基础模版开始，而不是直接使用这个功能丰富的集成方案的话，你可以看一看本项目的minimal分支.

线上文档

文档

线上地址

示例

截图

)

功能

- 登录 / 注销- 权限验证 - 页面权限 - 指令权限 - 权限配置 - 二步登录- 多环境发布 - Dev / Stage / Prod- 全局功能 - 国际化多语言 - 动态换肤 - 动态侧边栏（支持多级路由嵌套） - 动态面包屑 - 快捷导航(支持右键操作) - 粘贴板 - Svg 图标 - 搜索 - 全屏 - 设置 - Mock 数据 / Mock 服务器 - 支持 PWA- 组件 - 编辑器 - 富文本编辑器 - Markdown 编辑器 - JSON 编辑器 - 头像上传 - 返回顶部 - CountTo - 拖放区 - 拖拽弹窗 - 拖拽看板 - 拖拽列表 - 拖拽选择 - ECharts 图表 - Mixin - 拆分窗格 - 黏性组件- 表格 - 动态表格 - 拖拽表格 - 内联编辑表格 - 复杂表格- Excel - 导出excel - 导入excel - 前端可视化excel- Zip - 导出zip- PDF - 下载 pdf- 控制台- 引导页- 综合实例- 错误日志- 错误页面 - 401 - 404

前序准备

你需要在本地安装node和git。本项目技术栈基于typescript、vue、vuex、vue-router、vue-cli、axios和element-ui，所有的请求数据都使用faker.js进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。

目录结构

本项目已经为你生成了一个完整的开发框架，提供了涵盖后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── mock # mock 服务器 与 模拟数据├── public # 静态资源 (会被直接复制)│ │── favicon.ico # favicon图标│ │── manifest.json # PWA 配置文件│   └── index.html # html模板├── src # 源代码│   ├── api # 所有请求│   ├── assets # 主题 字体等静态资源 (由 webpack 处理加载)│   ├── components # 全局组件│   ├── directive # 全局指令│   ├── filters # 全局过滤函数│   ├── icons # svg 图标│   ├── lang # 国际化│   ├── layout # 全局布局│ ├── pwa # PWA service worker 相关的文件│   ├── router # 路由│   ├── store # 全局 vuex store│   ├── styles # 全局样式│   ├── utils # 全局方法│   ├── views # 所有页面│   ├── App.vue # 入口页面│   ├── main.js # 入口文件 加载组件 初始化等│ ├── permission.ts # 权限管理│ ├── settings.ts # 设置文件│ └── shims.d.ts # 模块注入├── tests # 测试├── .circleci/ # 自动化 CI 配置├── .browserslistrc # browserslistrc 配置文件 (用于支持 Autoprefixer)├── .editorconfig # 编辑相关配置├── .env.xxx # 环境变量配置├── .eslintrc.js # eslint 配置├── babel.config.js # babel-loader 配置├── jest.config.js # jest 单元测试配置├── package.json # package.json 依赖├── postcss.config.js # postcss 配置├── tsconfig.json # typescript 配置└── vue.config.js # vue-cli 配置

如何设置以及启动项目

安装依赖

yarn install

启动本地开发环境（自带热启动）

yarn serve

构建生产环境 (自带压缩)

yarn build:prod

代码格式检查以及自动修复

yarn lint

运行单元测试

yarn test:unit

自动生成 svg 组件

yarn run svg

自定义 Vue 配置

请看Configuration Reference.

浏览器支持

Modern browsers and Internet Explorer 10+.

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions

参与贡献

请看CONTRIBUTING.md

License

MIT License

vue-typescript-admin-templatevue3element-uiwebpacktypescript

作者：Armour 开源协议：MIT

总览