Это минималистичный шаблон Vue Admin для административной панели. Он включает в себя только Element UI, axios, iconfont и контроль разрешений, которые необходимы для создания административного интерфейса.

Онлайн-адрес

Внутренний доступ

Extra

Если вы хотите динамически генерировать боковую панель и маршрутизатор в зависимости от роли пользователя, вы можете использовать эту ветку permission-control.

Этот проект разработан на основе webpack4. Если вы всё ещё хотите использовать webpack3, используйте эту ветку webpack3.

Если вам нужен административный интерфейс на основе Vue + TypeScript, посмотрите этот проект: vue-typescript-admin-template (спасибо: @Armour).

Связанные проекты

• vue-element-admin;
• electron-vue-admin;
• vue-typescript-admin-template.

Автор написал серию статей с учебными пособиями о том, как создать полноценный административный проект с нуля:

— Пошаговое руководство по созданию административного проекта с помощью Vue (базовая статья); — Пошаговое руководство по созданию административного проекта с помощью Vue (статья о контроле доступа); — Пошаговое руководство по созданию административного проекта с помощью Vue (практическая статья); — VueAdmin — минималистичный базовый шаблон для административных проектов, специально предназначенный для этого проекта, который можно рассматривать как документ (четвёртая статья серии); — Пошаговое руководство по упаковке компонента Vue.

Настройка сборки

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

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

# Рекомендуется не использовать cnpm для установки, так как это может вызвать различные странные проблемы с ошибками. Можно решить проблему медленной работы npm с помощью следующей операции.
npm install --registry=https://registry.npm.taobao.org

# Запустить сервер с горячей перезагрузкой на localhost:9528
npm run dev

# Собрать для производства с минификацией
npm run build

# Собрать для производства и просмотреть отчёт о комплекте
npm run build --report

Использование CDN для Element-Ui

Сначала найдите файл index.html (в корневом каталоге).

Импортируйте CSS и JS Element и импортируйте Vue. Поскольку Element-UI зависит от Vue, его необходимо импортировать перед ним.

Затем найдите webpack.base.conf.js и добавьте externals, чтобы webpack не упаковывал Vue и Element.

externals: {
  vue: 'Vue',
  'element-ui':'ELEMENT'
}

Кроме того, есть одна небольшая деталь: если вы используете глобальный объектный метод для импорта Vue, вам не нужно вручную Vue.use(Vuex). Он будет автоматически подключён, см. issue.

Наконец, вы можете использовать npm run build --report, чтобы увидеть эффект. Как показано на рисунке:

Конкретный код

Соответствующая ветка

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

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

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	последние 2 версии	последние 2 версии	последние 2 версии

Лицензия

Лицензия MIT.

Copyright (c) 2017-present PanJiaChen