# ant-admin-template

**Repository Path**: bobojun87/ant-admin-template

## Basic Information

- **Project Name**: ant-admin-template
- **Description**: vue3、ant design vue搭建后台系统模板项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-12-17
- **Last Updated**: 2021-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 介绍

### 前言

#### 基于Vue3.0、Vite 、 ant-design-vue的后台解决方案



### 代码仓库

https://gitee.com/ianj/ant-admin-template



### 预览

![](/src/assets/preview.jpg)



### 环境准备

你的本地环境需要安装 node版本 >= 12.0.0、git



### 目录结构

```sh
├── mock # mock数据
├── public # 静态资源
├── src # 项目代码
│   ├── api #请求相关
│   ├── assets # 静态资源
│   ├── components # 组件
│   ├── config # 数据配置
│   ├── directives # 指令
│   ├── enums # 常量，枚举
│   ├── hooks # hooks
│   ├── layout # 布局
│   ├── router #路由，菜单等
│   ├── settings # 配置文件
│   ├── store # vuex
│   ├── styles  # 样式
│   ├── utils # 工具类
│   └── views # 页面
│   ├── main.js # 入口文件
```



### 快速上手

#### 代码获取

```sh
# clone 代码
git clone https://gitee.com/ianj/ant-admin-template.git
```

#### 安装依赖

在项目根目录下,打开命令窗口执行,耐心等待安装完成即可

```sh
yarn
# or
npm install
```

#### 运行项目

```sh
yarn dev
# or
npm run dev
```



### 路由配置

在`src/router/routes/modules`内的一个`.js`文件

#### 一级路由

```js
import { HomeOutlined } from '@ant-design/icons-vue';

const route = {
  path: '/home',
  name: 'Home',
  component: () => import('@/views/home/index.vue'),
  meta: {
    icon: HomeOutlined,
    title: 'Home',
    keepAlive: true,
    affix: true,
  },
};

export default route;
```

#### 多级路由

```js
import { LayoutParentView } from '@/router/constant';
import { AppstoreOutlined } from '@ant-design/icons-vue';

const routes = {
  path: '/comp',
  name: 'Comp',
  component: LayoutParentView,
  redirect: '/comp/table',
  meta: {
    icon: AppstoreOutlined,
    title: 'Components',
  },
  children: [
    {
      path: '/comp/table',
      name: 'CompTable',
      component: () => import('@/views/comp/table/index.vue'),
      meta: {
        icon: '',
        title: 'Table',
        parentPath: '/comp',
        keepAlive: true,
      },
    },
  ],
};

export default routes;
```



#### Meta 配置说明

```js
{
  // title
  title: string;
    
  // 图标，也是菜单图标
  icon?: string;

  // 父级菜单路由path,非一级菜单必传，用于配置展开菜单
  parentPath?: string;
    
  // 可以访问的角色:['admin']
  roles?: RoleEnum[];

  // 当前激活的菜单。用于配置详情页时左侧激活的菜单路径
  currentActiveMenu?: string;

  // 当前路由不在菜单显示
  hideMenu?: boolean;
  
  // 是否外部链接
  isLink?: boolean;

  // 是否iframe
  isIframe?: boolean;

  // 内嵌iframe的地址或外部链接地址
  linkUrl?: string;
  
  // 菜单排序。越大排名越后面
  orderNo?: number;
}
```



### 样式

项目中使用的通用样式,都存放于styles下面

```sh
.
├── app.scss #	布局样式
├── ant.scss # ant 样式覆盖
└── color.scss # 颜色变量
├── index.scss # 入口
├── base.scss # 公共类
├── transition # 动画
└── variables.scss # 变量
```

### 代码规范

#### eslint

```sh
yarn add @vue/cli-plugin-eslint @vue/eslint-config-prettier eslint eslint-plugin-prettier eslint-plugin-vue -D
```

#### husky,lint-staged

```
yarn add husky lint-staged -D
```