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

[Онлайн-адрес](http://panjiachen.github.io/vue-admin-template).

[Внутренний доступ](https://panjiachen.gitee.io/vue-admin-template).

## Extra

Если вы хотите динамически генерировать боковые панели и маршрутизатор в зависимости от роли пользователя, вы можете использовать эту ветку [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control).

Этот проект разработан на основе webpack4. Если вы всё ещё хотите использовать webpack3, используйте эту ветку [webpack3](https://github.com/PanJiaChen/vue-admin-template/tree/webpack3).

Если вам нужен бэкенд на основе Vue + TypeScript, вы можете посмотреть этот проект: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (спасибо: [@Armour](https://github.com/Armour)).

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

* [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin);
* [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin);
* [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template).

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

— [Руководство по созданию бэкенда с помощью Vue: базовая статья](https://juejin.im/post/59097cd7a22b9d0065fb61d2);
— [Руководство по созданию бэкенда с помощью Vue: статья о контроле доступа](https://juejin.im/post/591aa14f570c35006961acac);
— [Руководство по созданию бэкенда с помощью Vue: практическая статья](https://juejin.im/post/593121aa0ce4630057f70d35);
— [Руководство по созданию бэкенда с помощью Vue: vueAdmin — базовый шаблон для бэкенда](https://juejin.im/post/595b4d776fb9a06bbe7dba56);
— [Руководство по созданию бэкенда с помощью Vue: руководство по упаковке компонента Vue](https://segmentfault.com/a/1190000009090836).

## Build Setup

```bash
# Клонировать проект
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` ([в корневом каталоге](https://github.com/PanJiaChen/vue-admin-template/blob/element-ui-cdn/index.html)).

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

Затем найдите [webpack.base.conf.js](https://github.com/PanJiaChen/vue-admin-template/blob/element-ui-cdn/build/webpack.base.conf.js) и добавьте `externals`, чтобы webpack не упаковывал Vue и Element.

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

Наконец, есть небольшая деталь: если вы используете глобальный объектный метод для импорта Vue, вам не нужно вручную `Vue.use(Vuex)`. Он будет автоматически подключён. Подробнее см. в [issue](https://github.com/vuejs/vuex/issues/731).

В конце концов, вы можете использовать `npm run build --report`, чтобы увидеть эффект. Как показано на рисунке:
![demo](https://panjiachen.github.io/images/element-cdn.png).

**[Конкретный код](https://github.com/PanJiaChen/vue-admin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177).**

**[Соответствующая ветка](https://github.com/PanJiaChen/vue-admin-template/tree/element-ui-cdn).**

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

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

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px">](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px">](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px">](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px">](http://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| последние 2 версии| последние 2 версии| последние 2 версии

## Лицензия

Лицензия [MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE).

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