1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/tang006-vue-element-admin

Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README-en.md

vue element-ui license GitHub release

Введение

В течение последних шести месяцев я занимался разработкой панели управления для администратора с использованием Vue. Несмотря на то, что панель управления включает более 70 страниц и свыше 10 разрешений, поддержка проекта требует минимальных усилий. Поэтому я решил сделать его открытым, чтобы поделиться своим опытом и прогрессом в разработке панели управления. Технологический стек в основном состоит из Vue.js+Element+axios. Поскольку это личный проект, все запросы данных эмулируются с помощью Mock.js. Примечание: если кто-то хочет модифицировать или развивать этот проект, пожалуйста, удалите файлы мока.

Демо: http://panjiachen.github.io/vue-element-admin

Примечание: в проекте используется element-ui@1.4.2, поэтому требуется vue 2.3.0+

Возможности

  • Вход/Выход
  • Аутентификация разрешений
  • Боковая панель
  • Хлебные крошки
  • Редактор богатого текста
  • Редактор Markdown
  • Редактор JSON
  • Перетаскивание списка
  • Разделитель панелей
  • Зона загрузки файлов
  • Прилипающие элементы
  • Счетчик
  • ECharts
  • Страницы ошибок 401, 404
  • Журнал ошибок
  • Экспорт в Excel
  • Загрузка Excel
  • Экспорт в ZIP
  • Пример таблицы
  • Пример интерактивной таблицы
  • Пример перетаскиваемой таблицы
  • Пример формы
  • Распределение для нескольких сред
  • Панель управления
  • Двухфакторная аутентификация
  • Сворачиваемая боковая панель (поддерживает вложенные маршруты)
  • Моковые данные
  • Пример кэшированных вкладок
  • Полноэкранный режим
  • Преобразование Markdown в HTML
  • Вкладки представлений
  • Буфер обмена

Разработка

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

# Установить зависимости
npm install

# Или (не рекомендуется использовать cnpm из-за неизвестных багов, используйте зеркало Taobao)
npm install --registry=https://registry.npm.taobao.org

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

Открыть в браузере: http://localhost:9527

Распределение

# Сборка стадийной среды с webpack-bundle-analyzer
npm run build:sit-preview

# Сборка продакшн среды
npm run build:prod

Структура директорий

├── build                      // сборка 
├── config                     // конфигурация
├── src                        // исходный код
│   ├── api                    // все запросы
│   ├── assets                 // статические ресурсы, такие как темы, шрифты
│   ├── components             // глобальные публичные компоненты
│   ├── directive              // глобальные директивы
│   ├── filters                // глобальные фильтры
│   ├── mock                   // моковые данные
│   ├── router                 // маршрутизация
│   ├── store                  // глобальное управление состоянием
│   ├── styles                 // глобальные стили
│   ├── utils                  // глобальные публичные функции
│   ├── view                   // представления
│   ├── App.vue                // входное представление
│   └── main.js                // входной файл для загрузки компонентов, инициализации
├── static                     // сторонние библиотеки, не упакованные Webpack'ом
│   └── Tinymce                // редактор богатого текста
├── .babelrc                   // конфигурация babel-loader
├── eslintrc.js                // конфигурация eslint
├── .gitignore                 // gitignore
├── favicon.ico                // favicon
├── index.html                 // HTML шаблон
└── package.json               // package.json

История изменений

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

Пожертвовать

Если вы считаете этот проект полезным, вы можете купить мне чашку кофе пожертвовать

Управление состоянием

Состояние пользователя и конфигурации приложения управляется Vuex. Остальные данные управляются на своих собственных бизнес-страницах.

Демо

Двухфакторная аутентификация, поддерживающая WeChat и QQ

Реальное переключение тем

Вкладки

вкладки

Сворачиваемая боковая панель

Перетаскивание таблицы

Интерактивная таблица

Загрузка обрезанного аватара

Журнал ошибок

Богатый текст (интегрированный с Qiniu, водяными знаками и настройками)

Упаковка компонента таблицы

Графики

Экспорт в Excel

Больше

http://panjiachen.github.io/vue-element-admin

Лицензия

MIT

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

vue-element-admin этот проект предназначен как решение для интеграции административных панелей и не подходит для разработки на основе базового шаблона. В качестве шаблона рекомендуется использовать vueAdmin-template, для десктопных приложений — electron-vue-ad. Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/tang006-vue-element-admin.git
git@api.gitlife.ru:oschina-mirror/tang006-vue-element-admin.git
oschina-mirror
tang006-vue-element-admin
tang006-vue-element-admin
master