Лёгкий шаблон для бэкенд-системы управления на Vue-cli и iView

Онлайн-демонстрация: http://111.229.176.181:1223/

Зависимости:

• vue-router;
• iView;
• axios;
• vuex.

Функции:

Страница входа:

Панель навигации:

• переключение страниц по нажатию на ярлык;
• обновление текущей страницы с ярлыком;
• закрытие других или всех ярлыков.

Примечание: имя компонента и имя маршрута должны совпадать, например, если имя компонента Home.vue — home, то в файле маршрута оно также должно быть home. Иначе содержимое страницы не будет кэшироваться.

// В файле router:
{
    path: 'home',
    name: 'home',
    component: () => import('../views/Home.vue')
}

// В Home.vue:
export default {
    name: 'home'
}

Боковая панель:

• расширение и сжатие;
• автоматическое сжатие при слишком малой ширине страницы;
• многоуровневое меню (с использованием компонентов iView).

Информация о пользователе:

• уведомления о сообщениях;
• аватар пользователя;
• основные данные.

Динамическая панель меню:

• динамическое создание меню на основе данных;
• скрытие элементов меню с помощью атрибута hidden, при этом доступ к странице остаётся возможным (см. DEMO и соответствующий код).

Хлебные крошки:

• отображение пути текущей страницы.

Контроль доступа:

• перенаправление на страницу входа при попытке доступа к определённой странице без авторизации.

ESLint + VSCode для автоматического форматирования кода:

Конкретные настройки доступны по ссылке. Если ESLint не требуется, удалите соответствующие зависимости и файл .eslintrc.js из корневого каталога.

Jest для модульного тестирования:

Если тестирование не требуется, удалите связанные зависимости и каталог tests из корня проекта.

Заголовок страницы document.title:

Можно установить значение по умолчанию в src/utils/index и настроить соответствующие заголовки для каждого маршрута. Примеры см. в коде.

Прочее:

• использование перехватчиков axios для отображения loading перед ajax-запросами и закрытия после их завершения.

Примечание:

• исходный код доступен для просмотра и содержит необходимые комментарии; можно вносить изменения самостоятельно.

Компонент Index обычно требует только передачи данных, остальное не важно.

На рынке существует множество шаблонов для бэкенда на Vue, но они часто перегружены функциями, которые не используются, поэтому был создан этот базовый шаблон с минимальным набором необходимых функций. В качестве UI-библиотеки используется iView с множеством доступных компонентов.

Разработка:

npm run serve

Сборка:

npm run build

После сборки файлы не следует размещать в корневом каталоге сервера, иначе появится пустая страница.

Если всё же необходимо разместить файлы в корне сервера, измените путь сборки, открыв файл vue.config.js и удалив следующий код:

publicPath: './',

Лицензия: MIT