Введение

Модификация на основе vue-element-admin.

Предварительная подготовка

1. В этом проекте пользовательский идентификатор используется для управления правами доступа, мы изменили его на динамический маршрут с данными JSON на бэкенде (данные находятся в: mock/role/routes.js).

2. Мы имитировали получение данных JSON о маршрутах для разных ролей через токен с помощью mock (mock/role/index.js).

3. Мы внесли изменение, позволяющее контролировать маршрутизацию через конфигурационный файл (@/settings.js): routesRole устанавливает контроль над маршрутизацией на фронтенде или на бэкенде, all означает возврат маршрута из бэкенда, reception — управление маршрутизатором на фронтенде.

Функции

• Вход и выход:
  • Вход и выход пользователя.
• Проверка прав доступа:
  • Права доступа к страницам.
  • Директивы прав доступа.
  • Конфигурация прав доступа.
  • Двухфакторная аутентификация.
• Многосредовая публикация:
  • Dev, sit, stage, prod.
• Глобальные функции:
  • Многоязычная поддержка.
  • Динамическая смена тем оформления.
  • Динамическое боковое меню (поддерживает многоуровневую маршрутизацию).
  • Динамические хлебные крошки.
  • Быстрое навигационное меню (табы).
  • SVG Sprite иконки.
  • Локальные и бэкенд данные mock.
  • Полноэкранный режим Screenfull.
  • Адаптивное сжатие бокового меню.
• Редактор:
  • Богатый текст.
  • Markdown.
  • JSON и другие форматы.
• Excel:
  • Экспорт Excel.
  • Импорт Excel.
  • Фронтенд визуализация Excel.
  • Экспорт ZIP.
• Таблицы:
  • Динамические таблицы.
  • Перетаскивание таблиц.
  • Внутреннее редактирование.
• Страницы ошибок:
• Компоненты:
  • Загрузка аватара.
  • Возврат наверх.
  • Диалог перетаскивания.
  • Выбор перетаскиванием.
  • Доска перетаскивания.
  • Список перетаскивания.
  • SplitPane.
  • Dropzone.
  • Sticky.
  • CountTo.
• Комплексные примеры.
• Журнал ошибок.
• Dashboard.
• Направляющая страница.
• Графики ECharts.
• Clipboard (копирование и вставка).
• Markdown2html.

Разработка

# Установка зависимостей
npm install

# Рекомендуется не использовать cnpm для установки зависимостей напрямую, это может привести к различным странным ошибкам. Можно решить проблему медленной загрузки npm с помощью следующей команды
npm install --registry=https://registry.npm.taobao.org

# Запуск сервиса
npm run dev

Доступ к браузеру по адресу http://localhost:9527.

Публикация

# Сборка тестовой среды
npm run build:stage

# Сборка производственной среды
npm run build:prod

Участие в разработке

1. vue-element-admin.
2. vue-admin-beautiful.

Прочее

# Предварительный просмотр эффекта публикации
npm run preview

# Предварительный просмотр эффекта публикации + статический анализ ресурсов
npm run preview -- --report

# Проверка кода
npm run lint

# Исправление кода автоматически
npm run lint -- --fix

Присоединяйтесь к VUE техническому дискуссионному клубу один. Присоединяйтесь к VUE техническому дискуссионному клубу два.

Интерфейс