基于 Vue + TypeScript 搭建的后台系统模板。
本项目内置很多组件，如果您打算使用本项目的框架搭建您自己的项目，需要去掉很多的依赖和不需要的组件。
所以我准备了最干净的 kbt-vue-admin-Template。
一套简单的开发仅需两步：
- 开发您自己的 Vue 组件
- 在
src/router/routes-config.ts里配置路由等信息
系统根据路由等信息自动生成菜单栏、面包屑、标签页。
git clone https://github.com/Kele-Bingtang/kbt-vue-admin.gityarn installyarn serveyarn build:testyarn buildyarn lint前往 push.sh 文件修改要提交的远程仓库地址，然后在 Git Bash Here 执行命令：
sh push.sh "您的 commit 信息"系统的布局组件有顶栏、面包屑、侧边菜单栏、标签栏、内容区，位于 src/layout 下，分别位为 Header、SideMenu、TagsNav、MainContent 下。
内容区（MainContent）根据路由进行组件的跳转，可视化页面的组件在 src/views 下。
常用的组件进行封装，位于 src/components 下。
系统的 API 文件位于 src/api 下，采用 Axios 进行请求，该配置文件位于 src/config/request.ts 文件里。
系统的常量文件位于 src/config/constant.ts 文件里。
路由的所有相关文件位于 src/router 下：
- 路由和组件的配置文件为
routes-config.ts - 路由的核心配置、路由拦截文件为
index.ts - 路由使用的工具文件为
utils.ts
路由的配置有如下规则：
本项目需要的可配置参数:
path: string
name: string | "_noUseI18n_xxx" // 路由的名字，这是必须设置的，如果开启了 I18n，某些路由又不想使用 I18n，则 name 以 _noUseI18n_ 开头
redirect: string | function // 重定向到某个路由下，可选，function 使用方式请看官网：https://router.vuejs.org/zh/api/index.html#redirect
...... // 其他
meta: {
roles: ['admin', 'visitor'] // 可访问该页面的权限数组，当前路由设置的权限会影响子路由
title: { string | number | Function }
// 显示在侧边栏、面包屑和标签栏的文字
// 使用 '{{ 多语言字段 }}' 形式结合「多语言」使用
// 可以传入一个回调函数，参数是当前路由对象
notClickBread: boolean // 如果为 true，则该路由无法在面包屑中被点击，默认为 false
hideInBread: boolean // 如果为 true，则该路由将不会出现在面包屑中，默认为 false
hideInMenu: boolean // 如果为 true，则该路由不会显示在左侧菜单，默认为 false
alwaysShowRoot: boolean // 如果为 false 且某一级路由下只有一个二级路由，则左侧菜单直接显示该二级路由，如果为 true，则总会让一级菜单作为下拉菜单，默认为 false，仅限父级路由使用
notCache: boolean // 如果为 true，该路由在切换标签后不会缓存，如果需要缓存，则「必须」设置页面组件 name 属性（class 名）和路由配置的 name 一致，默认为 false
icon: string // 该页面在左侧菜单、面包屑显示的图标，无默认值
fixedInNav: boolean | number // 如果为 true，则该路由按照路由表顺序依次标签固定在标签栏，如果指定顺序，则按照顺序固定，如果 fixedInNav 为 2，没有 1，则第一个为 true 的路由，默认为 false
beforeCloseName: 'before_close_normal' // 如果设置该字段，则在关闭当前 tab 页时会去 @/router/before-close.js 里寻找该字段名「对应」的方法，作为关闭前的钩子函数，无默认值
}状态管理文件既有组件需要的数据、方法、也有用户信息、路由权限等的初始化方法，配合路由守卫进行初始化，位于 src/store/modules 下。
状态管理采用模块化，通过扫描 src/store/modules 下的 ts 文件，进行模块化集中注册。
注意：
src/store/modules/permission.ts（35 行左右）里需要您提供首页的 name 值（必须），默认是Home，因为本项目的首页正好是 Home，所以无需修改，如果您修改了首页的 name 值，请记得在该文件下修改。首页的路由需要被计算出来，给本项目的布局组件（面包屑、标签页）使用。
系统常用的函数位于 src/utils 下，实现复用性，有数据深克隆、URL 参数值截取、展示 title 等功能函数。
组件用到的 TypeScript 自定义类型在 src/types 下创建并引入使用。
该本项目布局用到的可定制化样式位于 src/styles 下，如侧边栏主题、全局样式，您可以查看源码，根据自己的美观修改对应的样式。
本项目使用的图标是 Element UI 内置的和 SVG 格式，因为 Element UI 内置的图标较少，所以自行在网上找 SVG 图标，如 阿里云矢量图标库。
图标位于 src/icons/svg 下。
使用步骤：
- 每当在
src/icons/svg文件夹内添加 icon 之后，可以通过在终端执行yarn svg来重新生成所有组件 - 在 vue 组件里使用 svg-icon 标签，如
<svg-icon name="bug" width="20px" height="20px" />，其中 name 是 svg 的文件名，width 和 height 为图标的宽度和高度
本项目实现了国际化，国际化的配置在 src/locale/lang 下，根据需要自行适配。
使用方式：
在 vue 组件的 template 标签这样使用：
<template>
<div>
$t("_route.home")
</div>
</template>在 script 标签里这样使用：
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({})
export default class Test extends Vue {
public test() {
return this.$t("_route.home");
}
}$t 代表国际化，里面的 _route.home 是 src/locale/lang 文件里的配置，如
中文语言：
export default {
_route: {
home: "首页",
}
}英文语言：
export default {
_route: {
home: "Home",
}
}这样您在切换语言的时候，首页 和 Home 就互相切换。
本项目内置了多环境，分为本地环境、测试环境、生产环境，本地环境无需设置，
- 本地环境的文件：.env.development
- 测试环境的文件：.env.test
- 正式环境的文件：.env.production
yarn dev 会被 Vue 识别为开启本地环境；yarn build 会被识别为开启生产环境；yarn build:test 会被识别为开启测试环境。
yarn dev会在命令后面自动加上--mode development，代表本地环境yarn build会在命令后面自动加上--mode production，代表生产环境
Vue 仅识别上面两个命令，而 yarn build:test 是自己手动加上 --mode test。
--mode xxx 会自动去根目录寻找 .env.xxx 文件的变量进行加载。
本项目内置了多环境，分为本地环境、测试环境、开发环境，本地环境无需设置，
环境的配置常用于 axios、静态资源获取、路由前缀，这些配置随着不同的环境（本地环境、测试环境、生产环境）而有所变化，配置这些内容，前往 .env.development、.env.production、env.test 进行对应的配置即可。
- .env.development 为本地环境的配置
- .env.production为生产环境的配置
- .env.test 为测试环境的配置
配置完后无需担心环境不契合问题，Vue 会自动识别项目处于哪种环境下，想知道 Vue 如何识别，可以看 使用流程 的介绍。
一套简单的开发仅需两步：
- 开发您自己的 Vue 组件
- 在
src/router/routes-config.ts里配置路由、角色等信息
系统根据路由、角色等信息自动生成菜单栏、面包屑、标签页。
用户的默认角色为 visitor，实际的角色应该从后端获取