kbt-vue2-admin-template

基于 Vue2 + TypeScript 搭建的后台系统模板。

这是纯净版，只有项目框架必要的信息。

master 分支支持 i18n：国际化、多语言
no-i18n 分支不支持 i18n：国际化、多语言。默认英文

如果只需要中文，则可以拉去 master 分支，然后执行 yarn remove vue-i18n，去掉 i18n 依赖、删除 src/locale 文件夹。

接着项目会报错，然后根据报错的位置改成中文即可。因为 i18n 用到了 $t 来切换多语言，所以去掉 i18n 依赖，$t 变成 undefined，就会报错。

Demo

使用流程

Clone code：拉取代码

git clone https://github.com/Kele-Bingtang/kbt-vue-admin-template.git

Project setup：安装依赖

yarn install

Compiles and hot-reloads for development：编译运行（开发环境使用）

yarn serve

Compiles and minifies for production：打包运行（测试环境使用）

yarn build:test

Compiles and minifies for production：打包运行（生产环境使用）

yarn build

Lints and fixes files：检查和修复文件

yarn lint

Push code：提交代码到 git

前往 push.sh 文件修改要提交的远程仓库地址，然后在 Git Bash Here 执行命令：

sh push.sh "您的 commit 信息"

Customize configuration：自定义配置的介绍

See Configuration Reference.

内容说明

布局

系统的布局组件有顶栏、面包屑、侧边菜单栏、标签栏、内容区，位于 src/layout 下，分别位为 Header、SideMenu、TagsNav、MainContent 下。

内容区（MainContent）根据路由进行组件的跳转，可视化页面的组件在 src/views 下。

组件

常用的组件进行封装，位于 src/components 下。

API

系统的 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，实际的角色应该从后端获取

Kele-Bingtang/kbt-vue2-template