Vue.JS Шаблон панели администратора для профессионалов



Basix Admin — отличный шаблон администратора, разработанный с помощью Vue.js. Для разработки шаблона не используется jQuery. Для создания этого выдающегося шаблона используются bootstrap, font-awesome и JavaScript. Вы получите все необходимые компоненты для создания любой панели администратора.



Он расширяет последние компоненты Bootstrap v-4.0, созданные Vuejs, предлагает все необходимое для начала работы с CMS, пользовательскими проектами, CRM и проектами панели администратора.

Vuejs 2 — это растущий фреймворк, который больше всего конкурирует с Reactjs от Facebook. Корпоративные приложения и небольшие приложения позволяют использовать модульную настройку компонентов. Компоненты могут быть добавлены или удалены просто соответствующими файлами/папками, мы разработали этот шаблон для конкретных компонентов и на модульной основе.



Более 60 вариантов виджетов дают вам больше гибкости для создания любых дизайнов в соответствии с вашими потребностями. Его очень легко настроить. Пункты меню можно добавлять/удалять из файла nav.js. Всего один файл создает ваше меню, его очень легко настроить, например, выпадающий список, разделитель, значки и т. д. Мы сделали навигацию как компонент, вам не нужно трогать какие-либо другие файлы. Все, что вам нужно в файле nav.js.



Каждый отдельный блочный элемент имеет собственные компоненты, поэтому он на 100% основан на компонентах и ​​является модульным шаблоном. Если вам нужен какой-либо новый компонент/страница, просто вызовите router.js и свяжите его с навигацией, вот и все !!!

Vue-CLI и Webpack предоставят вам больше гибкости для обеспечения оптимизации кода, безошибочного кода, минимизации файлов и т. д.

Особенности с первого взгляда

  • Последний Bootstrap v-4.0
  • Чистый и современный дизайн
  • Создан с использованием SCSS — включены файлы SCSS
  • Невероятно быстрый и легкий!
  • Последняя версия Vuejs
  • Глобальный SCSS и SCSS для каждого компонента (модульный!)
  • 5000+ иконок — Fontawesome, Brandico, Entypo, Fontelico, Glyphicons, Iconic Stroke, Ionicons, Maki, OpenWeb Icons
  • Настраиваемые диаграммы с Chart.js — линейная диаграмма, столбчатая диаграмма, кольцевая диаграмма, круговая диаграмма, полярная диаграмма.
  • Анимированный индикатор выполнения и индикаторы выполнения Vue
  • Полностью настраиваемые 60+ виджетов для использования на панели инструментов!
  • Модальные
  • Расширенные возможности интеграции с Google Maps — Google Maps, Bubble Maps, Leaflet Maps, Line Maps
  • Страницы — Вход, Регистрация, Ошибка 404, Ошибка 500
  • Создан с помощью Vue-CLI для простого создания компонентов
  • Вложенная маршрутизация с именем компонента
  • Полностью модульный! Каждый отдельный элемент как отдельный модуль
  • Хорошо задокументированы
  • Дружественный код для разработчиков
  • Полностью настраиваемый
  • +60 готовых виджетов
  • +80 вариантов компонентов
  • Полностью отзывчивый

Все остальные активы, показанные в демоверсии, включены в загрузку. Все внешние библиотеки загружаются с помощью npm. Все, что нужно для запуска и работы с нашим шаблоном, — это NodeJS, который быстро устанавливается и хорошо документирован. NodeJS автоматизирует весь процесс загрузки внешних библиотек и обеспечивает легкий старт.

Установка на MAC или Linux
Создайте каталог Project в своем домашнем каталоге. Скопируйте все файлы из папки Basix-Admin в папку вашего проекта. Перейдите в свой каталог с помощью команды «cd».

Установка Node.js

sudo apt-get update sudo apt-get install nodejs

Однолинейная установка

#install dependencies yarnpkg install # serve with hot reload at localhost:8080 yarn run dev # build for production with minification yarn run build

После завершения установки вы увидите созданную папку с именем «node_modules».

Установка NPM

sudo apt-get install npm

Установка Vue.js и Webpack

sudo npm install -g vue-cli vue init webpack-simple vue-cli

После этого вам нужно запустить команду «npm install». Все зависимости будут установлены из файла «package.json», это займет пару минут.

Вам нужно запустить еще несколько команд для зависимости Webpack

npm install node-sass npm install sass-loader npm install css-loader npm install vue-chartjs

Компоненты: мы добавили множество случайных компонентов для различных типов макетов панели инструментов. Каждый компонент имеет несколько вариаций. Мы знаем, что вам нужно несколько стилей на разных страницах для одного и того же компонента. Здесь вы получите кнопки, значки, вкладки, социальные кнопки, карточки, оповещения, индикаторы выполнения, модальные окна, сетки, типографику в этом разделе.

Таблицы: в версии Pro Basix доступны 3 типа таблиц. Первый — это основная таблица. Второй вариант содержит цвета, значки, метки в таблице. И третий - лучший для разных сложных проектов. Он имеет систему поиска и пагинации. Также вы можете выбрать, сколько строк вы хотите видеть на странице. Посмотрите следующий GIF-файл для лучшего понимания.

Формы. Мы не можем представить приложение Dashboard без формы. Форма помогает нам легко собирать и упорядочивать данные. Мы много думали и исследовали формы, чтобы мы могли предоставить все, что нужно разработчику для простого проектирования или продвижения проекта. Существует три типа форм. Базовый содержит все общие элементы, такие как Оплата, Имя, Почта и т. д. В расширенном разделе вы получите Ввод даты, Телефон, Страна и некоторые другие параметры. И третья — магия. Это форма волшебника. Взгляните на нашу форму мастера из демо.

Виджеты: вам нечего объяснять о виджете, потому что вы знаете все о его использовании. Позвольте мне упомянуть некоторые вещи, такие как счетчик продаж, счетчик социальных сетей, карточка профиля и т. Д., Доступные здесь.



Администратор Vue Element
Руководство: некоторые сложные приложения должны объяснять процесс «Как это работает
. Система гидов помогает продемонстрировать все без исключения…medium.com»





Первоначально опубликовано на vuejsadmin.com.