Это минималистичный vue-административный интерфейс управления. Он включает только Element UI & axios & iconfont & permission control & lint, необходимые для создания административного интерфейса.
Если вы хотите динамически генерировать боковую панель и роутер в зависимости от роли пользователя, вы можете использовать этот ветвь permission-control
Проект основан на webpack4
, если вы хотите использовать webpack3
, используйте этот ветвь webpack3
Если вы хотите использовать vue + typescript для административного интерфейса, посмотрите этот проект: vue-typescript-admin-template (спасибо: @Armour)
Я написал серию статей, как создать полный административный интерфейс с нуля:- руководство по созданию административного интерфейса с 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` ([корневая директория](https://github.com/PanJiaChen/vue-admin-template/blob/element-ui-cdn/index.html))
Добавьте CSS и JS Element, а также Vue. Поскольку Element-Ui зависит от Vue, Vue должен быть добавлен перед Element-Ui.
Затем найдите [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` для проверки результата
Как показано на рисунке:
**[Конкретный код](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) лицензия.
Copyright (c) 2017-present PanJiaChen
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )