Это минималистичный шаблон 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);
— [VueAdmin — минималистичный базовый шаблон для административных проектов, специально предназначенный для этого проекта, который можно рассматривать как документ (четвёртая статья серии)](https://juejin.im/post/595b4d776fb9a06bbe7dba56);
— [Пошаговое руководство по упаковке компонента Vue](https://segmentfault.com/a/1190000009090836).

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

```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.

Copyright (c) 2017-present PanJiaChen