8.3 KiB
English | 简体中文
总览
vue-typescript-admin-template 是一个后台前端解决方案，它基于 vue, typescript 和 element-ui实现。原始的 Javascript 版本的代码是由 PanJiaChen 开发维护的 vue-element-admin， 十分感谢大佬对开源社区做出的贡献 :)
如果你想从一个十分简单的基础模版开始，而不是直接使用这个功能丰富的集成方案的话，你可以看一看本项目的 minimal 分支.
线上文档
线上地址
截图
)
相关项目
Armour/vue-typescript-admin-mock-server (mock server for this project)
Armour/vue-typescript-admin-docs (documentation source for this project)
Javascript 版本:
PanJiaChen/vue-admin-template (a vue2.0 minimal admin template)
PanJiaChen/vue-element-admin (full features supported vue admin)
PanJiaChen/electron-vue-admin (a vue electron admin project)
功能
- 登录 / 注销
- 权限验证
- 页面权限
- 指令权限
- 权限配置
- 二步登录
- 多环境发布
- 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 配置
浏览器支持
Modern browsers and Internet Explorer 10+.
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
|---|---|---|---|
| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |