D:\react-ant-admin>git checkout vite

D:\react-ant-admin>cnpm i

D:\react-ant-admin>npm run dev

D:> git clone https://github.com/kongyijilafumi/react-ant-admin.git #github адрес медленный
D:> git clone https://gitee.com/kong_yiji_and_lavmi/react-ant-admin.git #код облако адрес быстрый

# npm медленный
npm i
# cnpm внутренний зеркальный сайт быстрый
cnpm i

npm run "start:mock" # запуск локальных фиктивных данных (в настоящее время нет фонового интерфейса, пожалуйста, используйте этот режим для предварительного просмотра проекта)
npm run start # запустить локальный интерфейс API для получения данных

// Функциональный компонент
import React from "react";

export default function Test() {
  return <div>test страница</div>;
}

// Классовый компонент
export default class Test extends React.Component {
  render() {
    return <div>test страница</div>;
  }
}

/**
 * MENU_* информация найдена в файле package.json
 * Добавить информацию о маршрутах к компонентам pages
 * Экспорт компонента по умолчанию содержит информацию о маршруте или предоставляет информацию о внешнем маршруте
 * Будет захвачен webpack-router-generator плагином webpack
 */

// 1. Захваченный маршрут по умолчанию экспортируется прототипом компонента
Test.route={
  [MENU_TITLE] : "test страница",
  [MENU_KEY] : 11,
  [MENU_PATH]: "/test"
}

// 2. Захваченная внешняя информация о маршруте имеет более высокий приоритет
export const route = {
  [MENU_TITLE] : "test страница",
  [MENU_KEY] : 11,
  [MENU_PATH]: "/test"
}

let menu = [
  {
    [MENU_TITLE]: "Список страниц",
    [MENU_PATH]: "/list",
    [MENU_KEY]: 9, // Идентификатор меню уникален
    [MENU_PARENTKEY]: null,
    [MENU_ICON]: "icon_list",
    [MENU_KEEPALIVE]: "false",
    [MENU_LAYOUT]:"FULLSCREEN" // Тема содержимого главной страницы отображается в полноэкранном режиме
    [MENU_ORDER]: 1,
  },
  {
    [MENU_TITLE]: "Карточный список",
    [MENU_PATH]: "/card",
    [MENU_KEY]: 10,
    [MENU_PARENTKEY]:
``` 9, // Идентификатор уникального меню  
    [MENU_ICON]: null,  
    [MENU_LAYOUT]: "TWO_COLUMN" // Макет с боковой панелью. Это свойство по умолчанию можно не заполнять. В src/layout/index.js по умолчанию экспортируется макет.  
    [MENU_KEEPALIVE]: "false",  
    [MENU_ORDER]: 5485,  
  },  
  // .... Начало добавления информации о меню ....  
  {  
    [MENU_TITLE]: "test", // Заголовок  
    [MENU_PATH]: "/test", // Путь доступа  
    [MENU_KEY]: 11, // Уникальный идентификатор меню  
    [MENU_PARENTKEY]: null, // Пустое значение означает, что это главное меню, а не подменю  
    [MENU_ICON]: "icon_infopersonal", // Значок меню  
    [MENU_ORDER]: 1, // Порядок меню. Чем меньше число, тем больше оно отображается впереди.  
    [MENU_KEEPALIVE]: "true", // Состояние страницы сохраняется  
  },  
  // .....  
];  

Поскольку меню будет использовать локальное хранилище сеансов window.sessionStorage, после сохранения кода необходимо закрыть текущее окно и снова открыть адрес http://localhost:3000/react-ant-admin.

> После открытия вы обнаружите, что в меню появится дополнительная вкладка «test», и при её нажатии откроется ранее созданная страница test. Таким образом, создание меню и страниц завершено.

## Запуск скрипта

После завершения установки зависимостей есть несколько способов запуска:

- npm run start

Запрос данных интерфейса, отображение информации о проекте через серверную часть.

- npm run «start:color»

Запрос данных интерфейса, отображение информации о проекте через серверную часть, и включение конфигурации цвета темы.

- npm run «start:mock»

Локальное моделирование данных, показ информации о проекте с использованием фиктивных данных.

- npm run «start:mock_color»

Локальное моделирование данных, показ информации о проекте с использованием фиктивных данных, и включение конфигурации цвета темы.

- npm run build

Обычный режим упаковки.

- npm run «build:color»

Упаковка с цветом темы. Размер проекта увеличится.

### Быстрый запуск проекта в vscode

Используйте редактор [vscode](https://code.visualstudio.com/) (доступен для [скачивания](https://blog.csdn.net/bielaiwuyang1999/article/details/117814237)).

Перетащите папку этого проекта в редактор vscode и найдите панель сценариев npm в левом нижнем углу. Выберите быстрый запуск без команды.

## Скриншоты проекта

- Вход

![Вход](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-doc01.png)

- Подробная страница

![Подробная страница](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-detail.png)

- Список

![Список](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-list.png)

- Управление правами

![Управление правами](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-power.png)

- Страница результатов

![Страница результатов](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-result1.png)