Перевод текста:

简体中文 | English | 日本語 | Spanish

SPONSORED BY

简介

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

• 在线预览

• 使用文档

• Gitter 讨论组

• Donate

• Wiki

• Gitee 在线预览（国内用户可访问该地址）

• 国内访问文档 文档（方便没翻墙的用户查看）

• 基础模板建议使用: vue-admin-template

• 桌面端: electron-vue-admin

• Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)

• awesome-project

v4.1.0+版本之后默认 master 分支将不支持国际化，有需要的请使用i18n分支，它会和 master 保持同步更新

该项目不支持低版本浏览器(如 ie)，有需求请自行添加 polyfill 详情

目前版本为 v4.0+ 基于 vue-cli 进行构建，若发现问题，欢迎提issue。若你想使用旧版本，可以切换分支到tag/3.11.0，它不依赖 vue-cli

群主 圈子 群主会经常分享一些技术相关的东西，或者加入 qq 群 或者关注 微博

前序准备

你需要在本地安装 node 和 git。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 Элемент-UI (https://github.com/ElemeFE/element), все запросы данных используют Mock.js (https://github.com/nuysoft/Mock) для имитации, предварительное изучение и освоение этих знаний будет очень полезно при использовании этого проекта.

Также есть серия обучающих статей о том, как с нуля создать полноценный бэкенд-проект. Рекомендуется сначала прочитать эти статьи, а затем приступить к практике в рамках этого проекта:

• «Рука об руку: создаём бэкенд с помощью Vue» — серия 1 (основы);
• «Рука об руке: создаём бэкенд с помощью Vue» — серия 2 (права доступа);
• «Рука об руке: создаём бэкенд с помощью Vue» — серия 3 (практика);
• «Рука об руке: создаём бэкенд с помощью Vue» — серия 4 (vueAdmin — минималистичный шаблон бэкенда);
• «Рука об руку: создаём бэкенд с помощью Vue» — серия 5 (v4.0 — новая версия);
• «Рука об руку: создаём компонент Vue»;
• «Рука об руку: используем иконки со вкусом»;
• «Рука об руку: разумно используем webpack4» (часть 1);
• «Рука об руку: разумно используем webpack4» (часть 2).

Если у вас возникли проблемы, пожалуйста, сначала ознакомьтесь с документацией по использованию и статьями. Если они не удовлетворят ваши потребности, вы можете создавать issue и PR.

Спонсоры

Станьте спонсором и разместите свой логотип в нашем README на GitHub со ссылкой на свой сайт. Стать спонсором

Akveo

Интеграция с Java-бэкендом, можно использовать промокод: SWB0RAZPZR1M, скидка 20 %.

Flatlogic

Шаблоны административных панелей Dashboard, созданные с использованием Vue, React и Angular.

Функции

- Логин / выход

- Проверка прав доступа
  - Права страницы
  - Команды прав
  — Конфигурация прав
  — Двухфакторная аутентификация

- Публикация в нескольких средах
  — Dev
  — Sit
  — Stage
  — Prod

- Глобальные функции
  — Многоязычная поддержка
  — Динамическая смена тем оформления
  — Боковая панель (поддерживает многоуровневую маршрутизацию)
  — Хлебные крошки
  — Быстрый переход (вкладки)
  — SVG Sprite иконки
  — Локальные/серверные mock данные
  — Полноэкранный режим Screenfull
  — Адаптивное сжатие боковой панели

- Редактор
  — Rich Text
  — Markdown
  — JSON и другие форматы

- Excel
  — Экспорт excel
  — Импорт excel
  — Визуализация excel на стороне клиента
  — Экспорт zip

- Таблицы
  — Динамические таблицы
  — Перетаскивание таблиц
  — Встроенное редактирование

- Страницы ошибок
  — 401
  — 404

- Компоненты
  — Загрузка аватара
  — Возврат наверх
  — Диалог перетаскивания
  — Выбор перетаскивания
  — Доска перетаскивания
  — Список перетаскивания
  — SplitPane
  — Dropzone
  — Sticky
  — CountTo

- Комплексные примеры
- Журнал ошибок
- Панель управления
- Направляющие страницы
- Графики ECharts
- Буфер обмена (копирование и вставка)
- Markdown2html

Разработка

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

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

# Установить зависимости
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

Прочее

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

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

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

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

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

Changelog

Подробные изменения для каждого выпуска описаны в примечаниях к выпуску.

Онлайн-демонстрация

Онлайн-демонстрация

Пожертвования

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

Дополнительные способы пожертвований

PayPal Me

Buy me a coffee

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

Вы также можете поддержать vue-element-admin, купив официальные стикеры, каждый проданный стикер приносит проекту 2 юаня.

Поддержка браузеров

Современные браузеры и Internet Explorer 10+.

| | ## Лицензия

MIT

Авторские права (c) 2017–н. в. PanJiaChen