Привет, Хабр! Я написал это подробное пошаговое руководство, чтобы каждый мог создать собственное приложение с использованием платформы Nuxt.js с нуля.
В этой статье мы обсудим базу, основы создания приложения на Nuxt.js:
- создание и настройка проекта,
- ресурсы и статика: стили, шрифты, изображения, публикации,
- создание компонентов,
- создание страниц и макетов,
- развертывание приложения (deploy).
Немного о Nuxt.js
Nuxt — это фреймворк высокого уровня, основанный на Vue. Nuxt.js позволяет разрабатывать изоморфные веб-приложения «из коробки», абстрагируя детали распределения серверного и клиентского кода.Благодаря такому подходу мы экономим время и можем сосредоточиться на развитии.
Ключевые преимущества Nuxt:
- SPA, SSR и предварительный рендеринг уже настроены; все, что нам нужно сделать, это указать на это.
В этом приложении мы используем пререндеринг для продуктового режима, то есть заранее генерируем все страницы сайта, а затем разворачиваем их на хостинг для распространения статического контента.
- Превосходное SEO для всех поисковых систем является результатом использования SSR или предварительного рендеринга.
- Быстрое взаимодействие с сайтом по сравнению со статическими сайтами.
Это достигается за счет загрузки только необходимых фрагментов js, стилей CSS и запросов API (большая часть этого процесса автоматизирована с помощью веб-пакета 4, который работает под капотом Nuxt).
- Отличная скорость Google Lighthouse/Page. При правильной настройке можно получить 100/100 даже на слабом сервере.
- Модули CSS, Babel, Postscc и другие интересные инструменты предварительно настраиваются при использовании.
- Данная структура проекта позволяет комфортно работать в средних и больших командах.
- Более 50 готовых модулей и возможность использовать любые пакеты из обширной экосистемы Vue.js.
Это фреймворк, который мне очень понравился за простоту использования и возможность создавать гибкие и легко масштабируемые приложения.
Итак, предлагаю начать и убедиться во всех преимуществах на практике.
Дополнительную информацию о Nuxt.js см.
Подробные руководства также размещены.
Здесь .
Дизайн
Продуманный, готовый дизайн, а еще лучше UI-кит, значительно ускорит и упростит разработку любого приложения.Если поблизости нет доступного UI-дизайнера, ничего страшного.
В рамках нашей инструкции мы справимся сами! Специально для этой статьи я подготовил дизайн блога в современном минималистичном стиле с простым функционалом, достаточным для демонстрации возможностей Nuxt. Для разработки я использовал онлайн-сервис Figma. Комплект дизайна и пользовательского интерфейса доступен по адресу связь .
Вы можете скопировать этот шаблон и использовать его в своем проекте.
Создание проекта
Для создания проекта воспользуемся утилитой от разработчиков Nuxt. создать-nuxt-приложение , который позволяет настроить шаблон приложения через cli. Инициализируем проект, указав его имя:Далее в несколько шагов утилита предложит нам выбрать набор предпочтительных библиотек и пакетов, после чего самостоятельно скачает, настроит и настроит их для проекта.npx create-nuxt-app nuxt-blog
Полный список выбранных опций вы можете посмотреть на сайте Гитхаб .
Для этого проекта будет использоваться конфигурация с Typescript. При разработке на Vue с Typescript вы можете использовать два API: API опций или API класса .
Функционально они не отличаются друг от друга, но имеют разный синтаксис.
Лично я предпочитаю синтаксис Options API, поэтому именно его мы и будем использовать в нашем проекте.
После создания проекта мы можем запустить наше приложение с помощью команды: npm run dev. Теперь он будет доступен на localhost:3000. Nuxt использует в качестве локального сервера веб-пакет-dev-сервер с установленным и настроенным ГМР , что делает разработку быстрой и комфортной.
Поскольку мы создаем демо-версию приложения, я не буду писать для него тесты.
Но я настоятельно рекомендую не пренебрегать тестированием приложений при коммерческой разработке.
Если вы еще не затрагивали эту тему, советую обратить внимание на шутка — очень простой, но мощный инструмент, поддерживающий работу с Nuxt в сочетании с vue-test-utils .
Структура проекта
Nuxt по умолчанию создает структуру каталогов и файлов, подходящую для быстрого начала разработки.
-- Assets
-- Static
-- Pages
-- Middleware
-- Components
-- Layouts
-- Plugins
-- Store
-- nuxt.config.js
-- .
other files
Для нашего проекта эта структура подходит идеально, поэтому менять ее не будем.
Подробнее о назначении различных каталогов можно прочитать на странице Сайт Nuxt .
Создание приложения
Прежде чем писать какой-либо код, давайте сделаем следующее: 1. Удалите стартовые компоненты и страницы, созданные Nuxt. 2. Для нашего удобства и экономии времени при разработке установим pug и scss. Давайте запустим команду: npm i --save-dev pug pug-plain-loader node-sass sass-loader fibersПосле этого можно будет использовать атрибут lang для тегов шаблона и стиля:
<template lang="pug"></template>
<style lang="scss"></style>3. Добавьте поддержку глубокого селектора ::v-deep в конфигурацию stylelint, что позволит вам применять стили к дочерним компонентам, игнорируя область действия.
Подробнее об этом селекторе можно прочитать Здесь .
{
rules: {
'at-rule-no-unknown': null,
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep'],
},
],
},
}
Все приготовления закончены, переходим к следующему этапу.
Сообщения
Посты будут храниться в каталоге content/posts, который мы создадим в корне проекта в виде набора файлов уценки.Давайте создадим 5 небольших файлов, чтобы сразу начать с ними работать.
Для простоты мы используем имена 1.md, 2.md и т. д.
В каталоге контента создадим файл Posts.d.ts, в котором определим типы объекта, содержащего всю необходимую информацию о публикации: export type Post = {
id: number
title: string
desc: string
file: string
img: string
}
Я думаю, что значения всех полей должны быть понятны из названий.
Вперед, продолжать.
В том же каталоге мы создадим еще один файл под названием Posts.ts со следующим содержимым: import { Post } from '.
/Post' export default [ { id: 1, title: 'Post 1', desc: 'A short description of the post to keep the user interested.' + ' Description can be of different lengths, blocks are aligned' + ' to the height of the block with the longest description', file: 'content/posts/1.md', img: 'assets/images/1.svg', }, .
{
id: 5,
title: 'Post 5',
desc:
'A short description of the post to keep the user interested.' +
' Description can be of different lengths, blocks are aligned' +
' to the height of the block with the longest description',
file: 'content/posts/5.md',
img: 'assets/images/5.svg',
},
] as Post[]
В свойстве img мы ссылаемся на изображения в каталоге assets/images, но этот каталог мы еще не создали, давайте сделаем это сейчас.
Теперь добавим в созданный каталог изображения в формате .
svg с указанными нами выше названиями.
Я возьму 5 изображений из отрисовать .
Этот замечательный ресурс постоянно обновляется и содержит множество бесплатных изображений в формате SVG.
Теперь, когда все готово, каталог содержимого должен выглядеть следующим образом: content/
-- posts.ts
-- Posts.d.ts
-- posts/
---- 1.md
---- 2.md
---- 3.md
---- 4.md
---- 5.md
А в каталоге assets должен был быть подкаталог images со следующим содержимым: assets/
-- images/
---- 1.svg
---- 2.svg
---- 3.svg
---- 4.svg
---- 5.svg
.
Динамическое получение файлов
Поскольку изображения и файлы с текстом постов мы будем получать динамически, необходимо реализовать глобальный миксин, который мы потом сможем использовать во всех компонентах.
Для этого создайте подкаталог mixins в каталоге плагинов и в нем файл getDynamicFile.ts со следующим содержимым: import Vue from 'vue'
export const methods = {
getDynamicFile(name: string) {
return require(`@/${name}`)
},
}
Vue.mixin({
methods,
})
Нам остаётся только подключить этот миксин в файле nuxt.config.js: {
plugins: [
'~plugins/mixins/getDynamicFile.ts',
],
}
Шрифты
После этапа создания постов подключим шрифты.Самый простой способ сделать это — замечательная библиотека Веб-шрифтлоадер , что позволяет вам получить любой шрифт с помощью Google Шрифты .
Однако в коммерческой разработке часто используются собственные шрифты, поэтому давайте рассмотрим именно такой случай.
В качестве шрифта для нашего приложения был выбран Рубик, который распространяется по лицензии.
Скачать его можно там же Google Шрифты .
Обратите внимание, что шрифты в скачанном архиве будут в формате otf, но так как мы работаем с вебом, то лучшим выбором для нас будут форматы woff и woff2. Они меньше по размеру, чем любые другие форматы, но они превосходны.
поддерживается во всех современных браузерах.
Чтобы конвертировать otf в нужные нам форматы, вы можете воспользоваться одним из множества бесплатных онлайн-сервисов.
Итак, шрифты в нужных нам форматах у нас есть, пора включить их в проект. Для этого давайте создадим подкаталог Fonts в статическом каталоге и добавим туда наши шрифты.
Создадим в этом же каталоге файл fonts.css, который будет отвечать за подключение наших шрифтов в приложении следующего содержания: @font-face {
font-family: "Rubik-Regular";
font-weight: normal;
font-style: normal;
font-display: swap;
src:
Теги: #JavaScript #vue.js #timeweb #nuxt.js
-
Устройство Управления Связью
19 Oct, 24 -
Еще Одна Проблема Безопасности Dropbox
19 Oct, 24 -
Валидатор W3C Уведомит Об Опечатках
19 Oct, 24 -
50-Летие Lego От Google
19 Oct, 24
