<h1 align="center">Добро пожаловать в vue-clean-admin 👋</h1>

<p>
  <img alt="Version" src="https://img.shields.io/badge/version-0.1.0-blue.svg?cacheSeconds=2592000" />
  <a href="#" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a>
</p>

> Простой и чистый фреймворк для бэкенд-администрирования

### 🏠 [Домашняя страница](https://gitee.com/caihai123/vue-clean-admin)

> Этот проект основан на технологиях [vue2](https://cn.vuejs.org/), [vuex](https://vuex.vuejs.org/zh/), [vue-router](https://router.vuejs.org/zh/), [vue-cli](https://cli.vuejs.org/zh/guide/), [axios](http://www.axios-js.com/) и [element-ui](https://element.eleme.cn/#/zh-CN)

### Структура каталогов

```bash
├── public                     # Статические ресурсы
│   │── favicon.ico            # Значок favicon
│   └── index.html             # HTML-шаблон
├── src                        # Исходный код
│   ├── assets                 # Изображения, файлы и другие статические ресурсы
│   ├── components             # Глобальные общие компоненты
│   ├── directive              # Глобальные директивы
│   ├── filters                # Глобальные фильтры
│   ├── layout                 # Глобальная разметка
│   ├── mixin                  # Глобальный миксин
│   ├── pages                  # Бизнес-связанные страницы
│   ├── router                 # Маршрутизация
│   ├── store                  # Глобальное управление хранилищем
│   ├── styles                 # Глобальные стили
│   ├── utils                  # Глобальные методы
│   ├── variables              # Глобальные CSS-переменные
│   ├── views                  # Все встроенные страницы фреймворка
│   ├── App.vue                # Главная страница
│   ├── main.js                # Входной файл Загрузка компонентов Инициализация и т.д.
│   └── permission.js          # Управление разрешениями
├── .browserslistrc            # Список браузеров
├── .eslintrc.js               # Правила ESLint
├── .gitignore                 # Конфигурация игнорируемых файлов Git
├── .prettierrc.js             # Конфигурация prettier
├── package-lock.json          # Файл описания зависимостей
├── package.json               # package.json
├── README.md                  # Описание проекта
└── vue.config.js              # Конфигурация vue-cli

Ссылки для предварительного просмотра

• https://caihai123.com/vue-clean-admin/
• https://caihai123.gitee.io/vue-clean-admin/

Установка

# Клонирование проекта
git clone https://github.com/caihai123/vue-clean-admin.git

# Переход в каталог проекта
cd vue-element-admin

# Установка зависимостей (не используйте cnpm или yarn)
npm install 
# or 
npm i --registry=https://registry.npm.taobao.org

# Запуск проекта для локальной разработки
npm run dev

# Сборка проекта
npm run build

# Исправление кода
npm run lint

Настройка разрешений

• Настройка меню

В этом проекте подход к управлению меню отличается от унифицированной платформы авторизации. Я сделал небольшую обработку, вы можете обратиться к src/permissions.js. Вам необходимо обратить внимание на следующие моменты:

1. Чтобы различать страницы и каталоги в этом проекте, вам нужно установить поле routePath каталога в '/' при настройке меню.
2. Я считаю, что все подстраницы не должны отображаться в боковом меню, но они всё равно должны быть настроены с разрешениями и вложенными отношениями в меню.
3. Должен существовать постоянный навигационный элемент, который я определил как домашнюю страницу (routePath = '/index').
4. Доступ к домашней странице должен быть открыт для всех пользователей.

• Настройки кнопок

Я добавил свойство authButKey к элементу el-button, вам просто нужно передать текущий идентификатор разрешения кнопки.

Стандарты разработки и примечания

• Все страницы должны быть первого уровня, иначе не будет кэширования маршрута.
• Каждая страница должна иметь атрибут name в конфигурации маршрута и на странице, иначе также не будет кэширования маршрутов.
• В @/utils/axios.js есть два экземпляра axios: один используется для отправки запросов на авторизацию, а другой — для бизнес-запросов. Их необходимо строго различать.
• Все словари хранятся в @/utils/dict.js, при необходимости их можно использовать вместе с @/components/DictSelect.vue или глобальным фильтром dictParse.
• Можно использовать только метод передачи параметров query в vue-router, другие методы могут нарушить некоторые функции навигации и кэширования маршрутов.
• При настройке меню в таблице маршрутизации и унифицированных разрешений необходимо начинать с /.

Правила фиксации кода в git

Формат: 【type】description

Возможные значения type:

• 【新增】Добавить страницу входа
• 【修复】Исправить ошибку отсутствия пароля при входе
• 【优化】Оптимизировать логику входа
• 【样式】Изменить стиль страницы входа (форматирование кода)
• 【文档】Обновить README.md
• 【重构】Перестроить страницу входа
• 【合并】Объединить код
• 【删除】Удалить страницу входа
• 【更新】Изменить правила eslint

Стандарт разработки интерфейса

• Все файлы компонентов начинаются с заглавной буквы (PascalCase), а все файлы .js следуют соединению через дефис (kebab-case). Файлы .vue, представляющие маршруты в папке pages, используют соединение через дефис (kebab-case), и папки маршрутов также следуют этому правилу.
• Код одного компонента не должен превышать 1000 строк.
• Рекомендуется использовать макеты с высокой адаптивностью, страница не должна иметь горизонтальную прокрутку, и страница должна нормально отображаться при ширине более 1200 пикселей.
• Для el-table, за исключением особых случаев, необходимо добавить border (с вертикальной рамкой).
• Не изменяйте стили компонентов по умолчанию, все страницы должны соответствовать единому стилю.
• Во всех местах, где данные могут быть легко повреждены, должна быть предусмотрена обработка ошибок (учёт особых ситуаций).
• Если в компоненте добавлен таймер или событие с помощью addEventListener, оно должно быть уничтожено или удалено вместе с компонентом.
• Ошибочный цвет соответствует #f56c6c в ElementUi.
• В Vue, свойства в data должны соответствовать структуре в template, с разумным разделением пустых строк или использованием объектов, без неиспользуемых переменных.
• Внимательно изучите документацию Vue и ElementUi, используя наиболее подходящие компоненты или API для соответствующих задач.
• Процесс написания кода должен начинаться с планирования и проектирования, а затем переходить к написанию (а не одновременной настройки).
• Вместо изображений следует использовать шрифтовые иконки.
• Избегайте установки непопулярных плагинов, загрузка которых составляет менее десяти тысяч в неделю.
• После добавления новых данных в разбивку на страницы перейдите на первую страницу, после редактирования или удаления обновите текущую страницу.
• Ширина всех окон фиксирована, не устанавливайте процентную ширину, максимальная ширина составляет 1000 пикселей, при большом количестве содержимого предпочтительно использовать внутреннюю прокрутку окна.
• Все словари данных централизованно поддерживаются в @/utils/dict.js, используются вместе с @/components/DictSelect.vue или @/filters/index.js с 'dictParse'.
• В 'v-for' не используйте 'index' (индекс) в качестве значения 'key'.
• Все доступные свойства в 'mixin' ([props, data, computed, methods]) должны начинаться с 'm_', обычные компоненты не должны иметь имена, начинающиеся с 'm_'.
• Старайтесь избегать лишних родительских узлов, не допускайте бессмысленных избыточных кодов или DOM.
• Всегда используйте наименьшую сложность и минимальное количество меток для решения проблем (любая сложная логика состоит из множества простых логик).
• Никогда не используйте import (в js) или @import url() (в css) для импорта файлов CSS, отличных от глобальных.
• Не добавляйте методы к прототипам встроенных объектов, таких как Vue, Array, Date. - При удалении данных необходимо двойное подтверждение
• Панель операций с таблицами всегда плавающая и находится справа
• В производственной среде консоль должна быть чистой, не печатайте бессмысленные данные
• Между текстом и другими кнопками без значков, кроме текстовых, следует добавить пробел
• На любую операцию должен быть соответствующий ответ
• Используйте псевдонимы @ разумно, избегайте конструкций наподобие ../../../
• Пишите код умнее

Автор

👤 caihai123

Покажите свою поддержку

Поставьте ⭐️, если этот проект вам помог!