Как добавить семантический интерфейс в ваш проект Nuxt JS
В этой статье мы рассмотрим, как интегрировать структуру semantic-ui с проектом NuxtJS. В частности, мы рассмотрим, как получить горячую замену модуля для перезагрузки вашей веб-страницы каждый раз, когда вы вносите изменения в файлы Semantic-UI.
Семантический интерфейс
Семантический пользовательский интерфейс - это среда разработки, которая помогает создавать красивые, гибкие макеты с использованием удобного для человека HTML. Подобно начальной загрузке, он дает вам все необходимое для начала работы над вашим веб-проектом. Однако он превосходит начальную загрузку, предоставляя более детальный контроль над тем, как выглядит каждый элемент на вашей странице, благодаря высокой тематике. Документация предоставляет информацию о настройке темы вашего сайта, а также всех компонентов, которые она предоставляет.
NuxtJS
Nuxt.js - это фреймворк для создания универсальных приложений Vue.js. Это действительно просто и предоставляет множество мощных опций прямо из коробки. В качестве фреймворка Nuxt.js имеет множество функций, которые помогут вам в разработке между клиентской и серверной сторонами, например асинхронные данные, промежуточное ПО, макеты и т. Д.
В этой статье предполагается, что у вас уже есть запущенный проект nuxt, в противном случае вы можете перейти по этой ссылке, чтобы начать работу.
Установка семантики
Semantic может использоваться как отдельный файл или устанавливаться через npm / yarn. Однако, чтобы получить возможность создания темы, вам необходимо установить с помощью диспетчера пакетов (я рекомендую npm, потому что на момент написания этой статьи, в июле 2018 года, мне не удалось получить yarn для успешной установки семантического пользовательского интерфейса). Для установки вы должны сначала установить gulp глобально (если вы еще этого не сделали), поскольку семантика зависит от gulp. Вы можете использовать команду npm install -g gulp для установки gulp, а затем запустить команду npm install semantic-ui --save в вашей папке nuxt, чтобы установить semantic-ui.
Если все прошло хорошо, у вас должен быть мастер, который спросит вас, какие параметры вы предпочитаете для своей семантической настройки пользовательского интерфейса. Вы можете просто оставить значения по умолчанию.
Интеграция семантики с Nuxt
Хотя nuxt работает с веб-пакетом под капотом, явного файла конфигурации веб-пакета нет, однако файл nuxt.config.js обслуживает как потребности веб-пакета, так и потребности проекта конфигурации nuxt. Итак, перейдите к файлу nuxt.config.js и под свойством head добавьте свойство css, которое будет выглядеть следующим образом:
...
head: {
// head options
},
css: [
'~/semantic/dist/semantic.min.css'
],
...
Это указывает на минифицированную сборку семантического файла css. Это все для интеграции nuxt. Вы можете найти другие параметры, которые входят в этот файл, в документации.
Начальная семантика
Затем cd в семантическую подпапку, созданную при установке семантического пакета. И выполните команду: gulp build, затем gulp.
gulp build предоставляет начальную папку распространения для хранения ваших семантических ресурсов, в то время как gulp запускает задачу наблюдения по умолчанию, которая автоматически восстанавливает ваши ресурсы при изменении файла.
Подведение итогов
При запущенной настройке часов создайте еще один экземпляр командной строки и cd в корне вашего проекта. Затем запустите npm run dev, чтобы запустить сервер nuxt HMR. Это также автоматически обнаружит любые изменения в вашей папке семантического распространения и мгновенно применит их к вашей странице.
Вуаля! Вы сделали. Вы можете перейти на страницу семантической документации и ознакомиться со всеми мощными опциями, которые они предоставляют для создания тем. В противном случае вы можете использовать тему по умолчанию, которая поставляется с семантической и быстрой версией вашего проекта nuxt.
Надеюсь, вы нашли это полезным. Я понимаю, что есть и другие способы совместной работы семантики и nuxt, и я был бы рад узнать о них в комментариях.
✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .
