Интенсивное чтение «Nuxtjs»

JavaScript внешний фреймворк

1. Введение

NuxtЭто фреймворк для разработки интерфейса, основанный на Vue.На этот раз мы переходимIntroduction toNuxtJSВидео, чтобы узнать о возможностях фреймворка и основных элементах фреймворков для фронтенд-разработки.

следующий сnextСтруктура очень похожа и может быть замечена вместе

Видео знакомит с установкой NuxtJ, структурой каталогов, маршрутизацией страниц, шаблонами навигации, asyncData, meta, vueX.

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

И asyncData, и Vuex решают проблемы с данными, а мета управляет метаатрибутами веб-страниц с помощью согласованного синтаксиса.Эту часть стоит сравнить с системой React, и она будет расширена в части интенсивного чтения.

Фреймворк разработки интерфейса Nuxtjs не только предоставляет базовые функции формирования шаблонов, но также устанавливает соглашения о структуре проекта и коде, чтобы уменьшить объем кода. Как видно из этого пункта, строительные леса всегда вращаются вокруг двух основных целей:Пусть каждая строка исходного кода описывает бизнес-логику, пусть структура каждого проекта будет одинаковой и легко читаемой..

Двадцать лет назад несколько сотен строк кода HTML, Css и Js могли завершить полноценный проект. Этого было достаточно, чтобы следовать основным спецификациям W3C. Код каждого проекта был простым и понятным, а поскольку не было сложного бизнес-логика, код Структура также очень проста. Но сейчас сложность front-end проектов постепенно увеличивается.Исходный код большого проекта может достигать сотен тысяч или миллионов строк, что не предусмотрено спецификацией W3C.Поэтому появились различные инженерные и модульные решения для решения Это сложная проблема.Проблема степени замысла также привела к фрагментации согласия между различными структурами, и степень рациональности замысла различна.

Такие фреймворки, как Nuxtjs, определяют стандарты фронтенд-разработки, которые поддерживают современные крупномасштабные проекты.Эта спецификация имеет сетевой эффект, то есть чем больше людей ее используют, тем больше ценность.

Далее, давайте перейдем к делу и посмотрим, какие спецификации разработки определяются скаффолдингом Nuxt.

2 Обзор

Установить

использоватьnpx create-nuxt-app app-nameСоздайте новый проект. Эта команда работает сcreate-react-appТо же самое, разница в основном в шаблоне и конфигурации.

Эта команда, по сути, загружает шаблон на локальный сервер и устанавливает его.nuxtРяд скриптов используется в качестве зависимостей проекта, и автоматически генерируется ряд npmScripts:

{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "test": "jest"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  }
}

затем пройтиnpm startДождитесь команды на разработку проекта, для большинства проектов запуск npmScripts является наиболее основанным на консенсусе.

Еще одним преимуществом этого метода установки является то, что зависимости устанавливаются локально, то есть среда разработки на 100% встроена в проект. Nuxt не использует глобальную команду cli для выполнения.Во-первых, npmScripts больше соответствует общим привычкам каждого, и нет необходимости запоминать громоздкие названия разных скаффолдингов и разных согласованных команд запуска.Второе-это то, что когда-то глобальные строительные леса обновлены несовместимо, старые проекты столкнутся с проблемами обслуживания.

Структура каталогов

├── .nuxt
├── layouts
├── pages
├── store
├── assets
├── static
├── middleware
├── plugins
├── nuxt.config.js

pages

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

layouts

Каталог, в котором хранится файл шаблона, имя файла — это имя шаблона, и страница может выбрать шаблон для использования, определив шаблон.

store

Глобальный каталог потока данных, представленный в главе vueX.

assets,static

Отдельно хранить файлы ресурсов, которые не нужно компилировать и не компилировать.vueстатические файлы, такие как файлы scss.

из-за.vueФайл объединяет html, js и css, поэтому, как правило, в статической папке не определяются дополнительные файлы стилей.

Конечно, это особенность экосистемы Vue, и будет много.scssФайлы перемешаны в разных каталогах, что влияет на чтение.

middleware,plugins

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

.nuxt

Для реализации удобных функций, таких как согласованная маршрутизация, некоторые файлы должны быть автоматически сгенерированы как реальная запись проекта при запуске проекта.Эти файлы хранятся в.nuxtкаталог, gitingore и ручная модификация не требуется.

nuxt.config.js

Nuxt использует файл js в качестве файла конфигурации, который является более расширяемым, чем файл конфигурации json.Этот файл также является единственным файлом конфигурации для всего проекта.

в принципеpages,layouts,store,assets, а уникальный файл конфигурации в основном стал стандартной конфигурацией современных интерфейсных сред разработки.

маршрутизация страниц

nuxt поддерживает маршрутизацию по соглашению:

├── pages
│   ├── home.vue
│   └── index.vue

Приведенная выше структура каталогов описывает два маршрута:/а также/home.

Маршрутизация параметров также поддерживается, если имя файла содержит префикс подчеркивания, определяется динамическая маршрутизация параметров:

├── pages
│   ├── videos
│   │   └── _id.vue

/videos/*будет указывать на этот файл и может быть доступен через$route.params.idПолучите этот параметр URL.

Еще одна особенность — вложенные маршруты:

├── pages
│   ├── videos
│   │   └── index.vue
│   └── videos.vue

videos.vueа такжеvideos/index.vueоба указывают на/videosДля этого маршрута, если эти два файла существуют одновременно, внешние видео будут использоваться в качестве внешнего слоя для перехвата всех/videosДоступ к маршрутам в папке можно получить черезnuxt-childПоказать дочерние элементы:

# pages/videos.vue
<template>
  <div>
    videos
    <nuxt-child />
  </div>
</template>

Шаблон навигации

Общедоступная логика страницы, такая как панель навигации, может быть размещена в шаблоне, а каталог шаблона находится вlayoutsпод папку.

По умолчаниюlayouts/default.vueДействует для всех страниц, но также может создавать, например.layouts/videos.vueспециальные навигационные файлы, вpages/Файл подкачки определяет использование этого шаблона со следующим объявлением:

<script>
  export default {
    layout: "videos"
  };
</script>

asyncData

asyncDataэто асинхронная функция выборки, поддерживаемая nuxt, которую можно заменитьdata.

dataфункция:

<script>
  export default {
    data() {
      return {};
    }
  };
</script>

Для асинхронных сценариев вы можете использоватьasyncDataЗаменять:

<script>
  export default {
    async asyncData() {
      return await fetch("/");
    }
  };
</script>

meta

Nuxt позволяет в.vueИнформация о пользовательском теге заголовка файла страницы:

<script>
  export default {
    headr() {
      return {
        title: "",
        meta: {
          charset: "utf-8"
        }
      };
    }
  };
</script>

Это функция, предоставляемая средой разработки, но в системе React ее можно передать черезuseTitleБудет легче понять, когда пользовательские хуки решат эту проблему и сведут функции фреймворка к функциям кода.

vueX

новый интегрированныйvuex,существуетstore/Создайте модель данных в папке:

export const state = () => ({
  videos: [],
  currentVideo: {}
})

export const mutations = {
  SET_VIDEOS (state, videos) {
    state.videos = videos
  }
  SET_CURRENT_VIDEO (state, video) {
    state.currentVideo = video
  }
}

следующий вpagesКомпоненты страницы в папке используют:

<script>
  import { mapState } from "vuex";

  export default {
    async fetch({ $axios, params, store }) {
      const reponse = await $axios.get(`/videos/${params.id}`);
      const video = response.data.data.arrtibutes;
      store.commit("SET_CURRENT_VIDEO", video);
    }
  };
</script>

Будуreturnзаменитьstore.commitВот и все, больше синтаксиса может относиться кдокументация vuex.

3 Интенсивное чтение

Фреймворк Nuxtjs делает несколько вещей:

  1. Унифицированное выполнение команд.
  2. Единая среда разработки.
  3. Единый каталог и спецификация кодов.
  4. Встроенные функции общедоступных утилит.

Унифицированное выполнение команд

Командная строка — это сценарий, который все разработчики используют по десятку, а то и десятку раз в день.Представьте, что было бы, если бы у проектов в команде было столько разных команд запуска, как показано ниже?

  1. npm start.
  2. monkey dev.
  3. npm run ng.
  4. npm run bootstrap & banana start.
  5. ...

Я никогда не знаю, как начать следующий проект, что сильно снижает эффективность разработки. Если серьезно, некоторые проекты могут пройтиnpm run docsПроверьте документацию, некоторые проекты не могут, некоторые проектыnpm run buildКомпиляция может быть запущена, но некоторые проекты компилировать не нужно и т. д. Так называемая несогласованность среды или затраты на миграцию и стоимость обучения вызваны несоответствием архитектурного проекта студентов, которые изначально отвечали за создание каркаса проекта. .Однако не обязательно использоватьmonkey devпроект для запуска, но проект может быть разработан дляmonkey devЭто кажется несовместимым с другими проектами, и его даже сложно поддерживать в единообразном виде.

Фронтенд-фреймворки для разработки, такие как Nuxtjs, выполняют команды единообразно, чтобы решить эту проблему Разработчикам требуется много времени, чтобы привыкнуть к этому, но эту тенденцию невозможно остановить.

Единая структура разработки

Хотя в наши дни у фреймворков React, Vue и Angular есть свои плюсы и минусы, если проект команды использует более двух фреймворков одновременно, никто не подумает, что это хорошо.

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

Для open source диверсификация — источник жизненных сил, но для компании диверсификация — это катастрофа Пока ни один фреймворк не осмеливается сказать, что его преимущество в том, что «смешение с другими фреймворками может повысить общую эффективность разработки».

Важнейшая проблема, которую должен решить фреймворк для фронтенд-разработки, заключается в том, что в любом случае можно выбрать только один фреймворк для разработки: Nuxtjs выбирает Vue, а Nextjs выбирает React.

Единый каталог и спецификация кодов

Спецификации каталогов и кода принципиально не влияют на универсальность проекта, поскольку различные структуры каталогов могут быть совместимы посредством сопоставления, а различные спецификации кода не влияют на выполнение кода. Итак, на что действительно влияют спецификации каталога и кода, так это на «стоимость декодирования» проекта программистом.

Так называемая стоимость декодирования — это стоимость, необходимая программисту для понимания логики проекта. Если вы менеджер по продажам, определенно эффективнее, чтобы еженедельные отчеты команды сводились в одном формате, чем «обобщать в вашем любимом виде», и то же самое верно для программирования.Проблема заключается в совершенно другой структуре каталогов и спецификации кода. для программистов Огромные препятствия для чтения и даже может вызвать тошноту.

Таким образом, различные структуры каталогов и спецификации кода являются ненужными барьерами, если ваша команда не достигла четкого консенсуса по какой-либо спецификации, в противном случае одна и та же структура каталогов и спецификация кода используются совместно с другими командами. Изменение спецификации кода - очень сложная вещь, но пока на повестку дня будет поставлено долгосрочное сотрудничество между различными правилами, стандартное единство, то почему я не могу достичь консенсуса на уровне компании, устранить эту боль заранее?

Следовательно, унифицированный каталог и спецификация кода является приоритетом, который необходимо определить каркас для разработки передней части. Во многих случаях не задавайте вопрос, почему каталог называетсяlayoutsвместо того, чтобы звонитьlayout, потому что чем больше масштаб совместной сети, сформированной за этой спецификацией, тем менее важно ее вызывать.

Встроенные функции общедоступных утилит

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

  1. Хотя извлечение общедоступных функций в пакеты npm может решить проблему повторного использования кода, ключевой момент заключается в том, как гарантировать, что ваш код может быть повторно использован другими?
  2. Как эффективно осадить и убрать из проекта общий для бизнеса код utils?

Scaffolding имеет встроенные общедоступные утилиты для решения этой проблемы. В приведенных выше разделах рассматриваются общие команды, платформы и спецификации, но в реальном кодеrouter history fetch storeи так далее понятия тоже могут быть унифицированы,Ни один проект не должен использовать пользовательскийfetchФункция может принимать только число, но она настраивается с самого начала.fetchЭто приведет к сопряжению непредсказуемой и ненужной бизнес-логики, что станет препятствием для понимания и повышения эффективности.

Таким образом, объединение этих пакетов, которые можно унифицировать, является ключом к дальнейшему повышению эффективности. Некоторым людям может показаться, что они сломали способ создания собственных колес, но точно так же, как мы не будем сегодня переписывать логику ядра браузера, стабильная логика не только приводит к повышению эффективности всей отрасли, но и породила большое количество Передовые рабочие места. Точно так же занятость, объединяющая основные общие функции, на самом деле ломает дорогу бессмысленной продукции. Каждый имеет право заниматься более ценными вещами. Не загоняйте себя в ловушку повторяющихся творений.fetchфункции в этой низкоуровневой деятельности.

4 Резюме

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

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

Адрес обсуждения:Интенсивное чтение "Nuxtjs" · Выпуск №213 · dt-fe/weekly

Если вы хотите принять участие в обсуждении, пожалуйста,кликните сюда, с новыми темами каждую неделю, выходящими по выходным или понедельникам. Интерфейс интенсивного чтения — поможет вам отфильтровать надежный контент.

Сфокусируйся наАккаунт WeChat для интенсивного чтения в интерфейсе

Заявление об авторских правах: Бесплатная перепечатка - некоммерческая - не производная - сохранить авторство (Лицензия Creative Commons 3.0)

Категории