Это минималистичный шаблон 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: практическая статья; — Руководство по созданию бэкенда с помощью Vue: vueAdmin — базовый шаблон для бэкенда; — Руководство по созданию бэкенда с помощью Vue: руководство по упаковке компонента Vue.

Build Setup

# Клонировать проект
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.

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