vue2-elementui-layout

Данный проект направлен на быструю разработку системы управления бэкендом и предоставляет примеры использования архитектуры фронтенда и некоторых часто используемых функциональных компонентов.

Проект основан на следующих технологиях: Vue2, ElementUI, Axios, Less, Vuex, Vue-Router.

1. Основные функции проекта

• Лаконичный дизайн интерфейса.
• Конфигурация ESLint.
• Предоставление набора инструментов.
• Интеграция методов асинхронных запросов и объединение файлов интерфейсов.
• Быстрая настройка маршрутов (включая настройку прав доступа).
• Настройка навигации в системе в соответствии с конфигурацией маршрутов (по умолчанию — верхняя панель + боковое меню, можно выбрать только верхнюю панель или только боковое меню).
• Предоставление часто используемых общих компонентов: BaseDialog, BaseTable, BaseText, BaseDatePicker.
• Компоненты и данные: предоставление методов и данных через mixins (таблицы, диалоговые окна, информация о пользователях, основные методы Echarts и т. д.).
• Правила проверки формы.
• Единая конфигурация для имени системы, версии и прокси.
• ...

2. Структура каталогов проекта

• dist — файлы после упаковки.
• public
  • template — статические шаблоны проекта.
• src
  • api — файлы, связанные с интерфейсами, по функциональным модулям.
  • assets
    • images
      • common
      • login
      • layout
      • ...
    • javascript — JavaScript, используемый отдельными модулями, отличается от mixins.
    • styles
      • theme — стили главной темы (созданы на сайте Element-UI).
      • 样式文件.less.
  • components — общие компоненты системы.
  • directives — глобально зарегистрированные директивы.
  • filters — глобальные фильтры.
  • layouts — компоненты, связанные с макетом интерфейса (навигация).
  • main — точка входа.
  • mixins — примеси, разделённые по функциям компонентов, используются по мере необходимости.
  • pages — компоненты страниц, названы по функциональным модулям, содержат компоненты общего модуля.
  • router
    • config.js — конфигурация навигации.
    • index.js.
    • routes.js — генерация конфигурации маршрута.
  • store
    • index.js.
    • modules.
  • utils — общие методы, глобальный импорт.
    • dict.js — словарь, при необходимости можно добавить в примеси.
    • request.js — общие методы асинхронного запроса.
    • tool.js — общие методы.
    • validator.js — правила проверки форм.
  • .env — конфигурация переменных среды, обычно достаточно этого файла.
  • .env.development — конфигурация переменных среды разработки.
  • .env.production — конфигурация переменных производственной среды.
  • .eslintrc.js — конфигурация ESLint.
  • vue.config.js.
  • webstorm.config.js — обработка конфигурации путей WebStorm, после добавления псевдонимов ctrl+левый клик не работает.

3. Основные функции системы

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

3.1 Навигация

3.1.1 Верхняя панель + боковое меню

3.1.2 Верхняя панель

3.1.3 Боковое меню

3.2 Вход

3.3 Таблица

3.1 Страница с таблицей

3.2 Эффект развёрнутой строки таблицы

3.3 Загрузка таблицы

3.4 Диалоговое окно

3.5 Выбор даты и времени

3.6 Простой текстовый дисплей

4. Заключение

Если система не запускается или возникают ошибки, попробуйте найти проблему самостоятельно. Постепенно это станет легче. В процессе использования, если вы обнаружите места, требующие улучшения и оптимизации, пожалуйста, оставьте комментарий ниже.