admin dashboard starter

Самый простой комплект административной панели в галактике!

Наша цель - упростить разработку спа -салона - отправьте свою административную панель администратора сегодня. Основное внимание уделяется стеку/архитектуре/шаблону дизайна, а не на эстетике. Дизайн сохраняется минимальным, чтобы сохранить это просто и облегчить реализацию вашего собственного дизайна.

Мы также освещаем дизайнерскую часть - портируем основные административные рамки в нашу технологию административной панели управления. Вот полный список (чем больше звезд, тем больше работы мы вкладываем):

• Таблетка
• Adminlte
• Администратор
• Материальная приборная панель

Построен из стройного и саппер. Rollup создает проект. Разверните с помощью хостинга Firebase, теперь, скачка или непосредственно на ваши серверы.

В общем, вы могли бы развернуть свою репутацию в реальном времени администратор.

Функции

• Простая в использовании компонентной системы. Компоненты являются простым HTML, CSS, JS.
• Маршрутизация на основе папок.
• Надежная система аутентификации. Легко подключите Firebase, Passport.js или Auth0.
• Тестирование и разработка на основе компонентов. Определить отдельные компоненты - работа и итерация быстрее. Надежный модульный тест/система тестирования компонентов.
• Источники данных. Легко подключите свои собственные данные - из базы данных, файла или удаленного сервера.
• Интеграционные тесты с кипарисом.
• Переключитесь между средами Dev и Prod из командной строки.
• Развернуть из командной строки в популярные услуги.

Запуск проекта

Однако вы получаете код, вы можете установить зависимости и запустить проект в режиме разработки с помощью:

 cd admin-dashboard-starter
npm install # or yarn
npm run dev

Откройте Localhost: 3000 и начните нажимать вокруг.

Проконсультируйтесь с Sapper.svelte.dev для получения помощи.

Структура

Sapper рассчитывает найти два каталога в корне вашего проекта - src и static .

SRC

Справочник SRC содержит точки входа для вашего приложения- client.js , server.js и (необязательно) service-worker.js -вместе с файлом template.html и каталогом routes .

SRC/Маршруты

Это сердце вашего приложения Sapper. Есть два вида маршрутов - страницы и серверные маршруты .

Страницы - это стройные компоненты, написанные в файлах .svelte . Когда пользователь сначала посещает приложение, им будет обслуживаться сервер-трансляционная версия рассматриваемого маршрута, а также какой-то JavaScript, который «увлажняет» страницу и инициализирует маршрутизатор на стороне клиента. С этого момента, навигация на другие страницы полностью обрабатывается на клиенте для быстрого, подобного приложению. (Sapper будет предварительно загружать и кэшировать код для этих последующих страниц, чтобы навигация была мгновенной.)

Серверные маршруты - это модули, записанные в файлах .js , эти функции экспорта, соответствующие методам HTTP. Каждая функция получает объекты экспресс request и response в качестве аргументов, а также next функцию. Это полезно для создания API JSON, например.

Есть три простых правила для названия файлов, которые определяют ваши маршруты:

• Файл с именем src/routes/about.svelte соответствует маршруту /about маршруте. Файл с именем src/routes/blog/[slug].svelte соответствует маршруту /blog/:slug в этом случае, и в этом случае params.slug доступен для маршрута
• Файл src/routes/index.svelte (или src/routes/index.js ) соответствует корню вашего приложения. src/routes/about/index.svelte обрабатывается так же, как src/routes/about.svelte .
• Файлы и каталоги с ведущим подчеркиванием не создают маршруты. Это позволяет вам сопоставлять вспомогательные модули и компоненты с маршрутами, которые зависят от них - например, у вас может быть файл с именем src/routes/_helpers/datetime.js , и он не создаст A /_helpers/datetime .

статический

Статический каталог содержит любые статические активы, которые должны быть доступны. Они обслуживаются с использованием SIRV.

В вашем файле Service-worker.js вы можете импортировать их в качестве files из сгенерированного манифеста ...

 import { files } from '@sapper/service-worker' ;

... чтобы вы могли кэшировать их (хотя вы можете не делать этого, например, если вы не хотите кэшировать очень большие файлы).

Конфигурация Bundler

Sapper использует Rollup или Webpack для предоставления распределения кода и динамического импорта, а также компиляции ваших стройных компонентов. С Webpack он также обеспечивает перезагрузку горячих модулей. Пока вы ничего не делаете, вы можете редактировать файлы конфигурации, чтобы добавить любые плагины, которые вам нужны.

Производственный режим и развертывание

Чтобы запустить производственную версию вашего приложения, запустите npm run build && npm start . Это отключит живую перезагрузку и активирует соответствующие плагины Bundler.

Вы можете развернуть свое приложение в любую среду, которая поддерживает узел 8 или выше. В качестве примера, чтобы развернуть сейчас, запустите эти команды:

npm install -g now
now

Используя внешние компоненты

При использовании стройных компонентов, установленных из NPM, таких как @Sveltejs/Svelte-Virtual-List, Svelte нуждается в исходном источнике компонента (а не любой предварительно скомпилированный JavaScript, который поставляется с компонентом). Это позволяет компоненту отображаться на стороне сервера, а также сохраняет ваше приложение на стороне клиента меньше.

Из -за этого важно, чтобы бундлер не рассматривал пакет как к внешней зависимости . devDependencies можете либо dependencies external опцию под server в Rollup.config.js, либо опция externals Ваше приложение:

npm install -D @sveltejs/svelte-virtual-list

Ошибки и обратная связь

Пожалуйста, будьте голоса на трекере выпуска DBH.