НОВАЯ ЗЕМЛЯ
С тех пор, как Deno выпустила свою стабильную версию 1.0 в мае 2021 года, поддержка и функциональность среды выполнения неуклонно увеличивались. Безопасная среда выполнения, которая имеет встроенную поддержку Typescript, а также обработку обещаний верхнего уровня, сделала ее идеальным местом для создания новых и оптимизированных пакетов и модулей.
ЧТО ЕСТЬ ВНО?
Первоначально разработанный в январе 2021 года и обновленный для стабильной версии Deno, vno был первым встроенным инструментом сборки для компиляции и объединения компонентов Vue в среду выполнения Deno. Основная функциональность инструмента предназначалась в первую очередь для одностраничных приложений и была долгожданным дополнением к растущей библиотеке инструментов и пакетов Deno. Благодаря сочетанию безопасности и простоты Deno с растущим миром Vue создание одностраничного приложения никогда не было таким простым. Но теперь он расширился и включает новую захватывающую функцию: создание статических сайтов.
ГЕНЕРАЦИЯ СТАТИЧЕСКОГО САЙТА
С момента первого выпуска команда упорно работала над разработкой и доработкой инструмента, чтобы обеспечить большую функциональность, и одной из областей, на которой мы сосредоточились, было создание статических сайтов («SSG»). В мире Deno был пробел, который заключался в том, что не было возможности использовать SSG для компонентов Vue в среде исполнения Deno. SSG неуклонно растет в рейтинге рендеринга страниц для веб-приложений, поскольку он со временем был оптимизирован и предлагает преимущества по сравнению с рендерингом на стороне сервера. При использовании SSG веб-сайт компилируется и отображается во время сборки в статические файлы для HTML, CSS и Javascript. В результате получается высокопроизводительное приложение, которое по умолчанию является безопасным и допускает динамическую маршрутизацию и файловую структуру.
КАК ЭТО РАБОТАЕТ?
vno проанализирует файлы в приложении Vue, скомпилирует и объединит файлы HTML, CSS и Javascript для чтения браузером. Для этого необходима определенная структура папок. vno предлагает приложение, очень похожее на create-vue или create-nuxt, поэтому создать приложение внутри него очень просто. В этом начальном шаблоне есть все, что вам нужно для создания приложения SSG Vue в Deno! Более подробное объяснение процесса можно найти в разделе Learn на нашем сайте.
ОСОБЕННОСТИ
Чтобы сделать разработку приложения с помощью нашего инструмента сборки максимально простой, мы использовали интуитивно понятный интерфейс командной строки, чтобы направлять процесс. Вы можете выбрать отрисованное на стороне сервера одностраничное приложение или приложение SSG, используя команду vno create. В этой статье мы подробнее рассмотрим, что предлагает сторона SSG. Оттуда, когда вы используете команду node run ssg dev, приложение развернет сервер разработки, полностью основанный на шаблоне, который вы можете использовать. Используя веб-сокеты, на сервере включена перезагрузка в реальном времени, что обеспечивает беспроблемную разработку.
getStaticProps и getStaticPaths
Мы ввели две функции, вдохновленные Next.js, чтобы обеспечить максимально удобную работу при создании приложения SSG с использованием vno. getStaticProps позволяет пользователю передавать свои свойства из функции на страницу во время сборки. Это позволяет статическому HTML иметь реквизиты для использования во всем приложении. Эта функция также может использовать аргумент context, который отформатирован как объект с параметрами маршрута в качестве ключей. Например: страница `[id] .vue` будет содержать значение` params` равное `{id:«… »}`.
getStaticPaths - это функция, которую можно экспортировать со страниц динамических маршрутов (страниц с соглашением об именах в скобках (например, [id] .vue) в приведенном выше примере), а vno будет использовать список путей, возвращаемых этой функцией, для генерации страница для каждого пути. Использование обеих этих функций в вашем приложении откроет двери ко многим возможностям для генерации динамических статических сайтов.
В этой статье были рассмотрены только некоторые способы использования vno для создания приложения Vue во время выполнения Deno, но это лишь поверхностный обзор того, что предлагается. В дополнение к команде vno create для запуска проекта с нуля вы также можете использовать vno с уже существующим приложением Vue, если вы следуете структуре, показанной на страницах обучения / документации. Мы настоятельно рекомендуем вам посетить наш веб-сайт, чтобы получить более полное руководство и документацию по использованию vno. Если есть какие-либо проблемы с сайтом или приложением, не стесняйтесь обращаться к нам по адресу [email protected], а также открывать вопрос на Github. Большое спасибо за чтение!
Команда vno:
Спенсер Болдуин: Github / LinkedIn
