Прошло два месяца! Nuxt3 от входа до реального боя! Вы достойны коллекционирования!

предисловие

Всем привет, я мэр поселка.Следующая длинная статья была сделана мной в течение более чем месяца.Nuxt3Из-за ограниченности энергии и уровня вывода результатов обучения неизбежны ошибки и упущения, и вы можете их исправить. В последующем у меня есть планы и идеи по продолжению обновления серии.Надеюсь вы дадите больше лайков и поддержите.Спасибо всем друзья! Добро пожаловать, чтобы обратить внимание на мой публичный номер "Передняя часть сельской школы», новые видео и статьи будут отправлены на официальный аккаунт как можно скорее, и вы можете войти в «Добавить группу», чтобы обсудить и поучиться с более чем 200 фронтенд-знаменитостями!

Сяою на Weibo 13-го числаNuxt 3Получил товар:

Прямая трансляция 23 числа снова будет доступна дляNuxt 3Принесите товар, на этот раз с эксклюзивной страницей PPT:

кажется этоNuxt3Это не должно быть легко! Так что же делает этот фреймворк?глава деревниДавайте все узнаем!

Буквально он основан наVue3гибридная среда разработки.

Так что же такое гибридная (Hybrid) разработка? Продолжайте читать официальное введение, статус гибрида еще скоро, сказалИнкрементная статическая генерацияISG и некоторые другие возможные расширенные режимы доступны в статически сгенерированном Nuxt2, но определенно не стоит каждый раз обновлять весь веб-сайт.Это инкрементальное обновление действительно стоит ждать! Многие из следующих новых функций: интеграция vite + vue3 + API композиции + ts, CLI, DevTools, Nuxt Kit показывают, что это полная общая среда разработки, которая обеспечивает хорошую организацию кода, высокую эффективность разработки, опыт разработки и рендеринг на стороне сервера. Возможности создания статических веб-сайтов (SSR/SSG) — это основное!

Вспомогательное видео

я специально записалNuxt3 от входа до реального бояСерия видео, друзья, которые любят смотреть обучающие видео, не пропустите!

space.scalescale.com/480140591/От…

Ранние пользователи Nuxt3, как насчет фреймворка, рекомендованного You Yuxi?

Создать проект

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

npx nuxi init nuxt3-app

Руководство по шаговой яме: версия узла должна быть выше v14.16.0

Установить зависимости

yarn install

запускать

использоватьyarn devЗапустите nuxt в режиме разработки:

yarn dev

✨Браузер автоматически откроет:http://localhost:3000

Минимальное приложение

В nuxt3 если нетpages/каталог, это означает, что зависимости vue-router не будут включены. Это можно сделать, если нам не нужна маршрутизация или если это просто лендинг.

Удалить app.vue ниже<NuxtWelcome />, просто добавьте контент, чтобы увидеть эффект:

<template>
  <div>
    <h1>nuxt3 app</h1>
  </div>
</template>

Попробуем добавить страницу и создать layouts/index.vue:

<template>
  <div>index page</div>
</template>

Не забудьте добавить выход из маршрута, app.vue:

<template>
  <div>
    <h1>nuxt3 app</h1>
    <!-- 路由出口 -->
    <NuxtPage></NuxtPage>
  </div>
</template>

тогда, если у меня есть другая страницаdetail.vueКуда вы хотите прыгнуть?

Вы можете добавитьNuxtLink, index.vue:

<template>
  <div>index page</div>
  <!--跳转链接-->
  <NuxtLink to="/detail">Detail Page</NuxtLink>
</template>

Теперь вы можете свободно прыгать!

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

• Как сделать вложенный маршрутизацию?
• Как сделать динамическую маршрутизацию?

Подождите, пусть староста подходит к вам по одному!Дай мне лайк,Это заставит меня обновляться быстрее! 😊

Согласованная маршрутизация — это действительно здорово!

Самое маленькое приложение nuxt3 было написано раньше.Мы попробовали метод многостраничного написания.Что касается введения vue-router, то поведение nuxt3 такое: если только app.vue не создаст каталог страниц, vue-router не будет введен , а размер пакета будет меньше , иначе вводится библиотека роутинга, что весьма шустро!

путь к странице

Nuxt3 автоматически интегрирует vue-router и картуpages/каталог в конфигурацию маршрутов приложения. как показано в предыдущей лекцииindex.vueа такжеdetail.vue, они, вероятно, выглядят следующим образом в окончательной сгенерированной таблице конфигурации маршрутизации:

[
  {
    path: '/',
    component: '~/pages/index.vue',
    name: 'index',
  },
  {
    path: '/detail',
    component: '~/pages/detail.vue',
    name: 'detail',
  }
]

динамическая маршрутизация

Если мы включим в имя файла или имя папки方括号, они будут преобразованы в动态路由параметр.

Например, следующая файловая структура:

-| pages/
---| users-[group]/
-----| [id].vue

В приведенном выше случае мы можем использовать компонент[id].vueдоступ вgroup,idЭти два параметра:

<template>
  {{ $route.params.group }}
  {{ $route.params.id }}
</template>

пройти через/users-admins/123Перейдите к:

<NuxtLink to="/users-admins/123">管理员123</NuxtLink>

Вложенные маршруты

Каталог и файл имеют одинаковое имя, создавая вложенный маршрут.

Например, следующая структура каталогов:

-| pages/
---| parent/
------| child.vue
---| parent.vue

child.vue

<template>
  <div>
    <h1>child page</h1>
  </div>
</template>

Компонент NuxtChild используется в родительском компоненте для отображения содержимого вложенных дочерних компонентов parent.vue:

<template>
  <div>
    <h1>parent page</h1>
    <!-- 子组件出口 -->
    <NuxtChild></NuxtChild>
  </div>
</template>

Попробуйте, INDEX.VUE

<NuxtLink to="/parent/child">Parent</NuxtLink>

В результате маршрут будет выглядеть следующим образом:

{
  path: '/parent',
  children: [
    {
      path: 'child'
    }
  ]
}

то если только использовать/parentЧто случится? Обнаружил, что содержимое пропало, явно нужен{path: '/parent/'}подмаршрут

Решение тоже очень простое, т.parent/добавить один в каталогindex.vueВот и все.

принцип

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

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

головокружение писать, всеСделайте мэру комплимент, это даст мне быстрое облегчение 😊!

Умное использование шаблонов макетов, эффективная разработка начинается здесь!

Макет страницы

Ранее мы попробовали две важные функции:动态路由а также嵌套路由.

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

• router-extras-module Настройте параметры маршрута на странице
• @nuxtjs/router Переопределите маршрутизацию Nuxt и напишите свой собственныйrouter.jsдокумент
• в файле конфигурацииnuxt.config.jsиспользуется вrouter.extendRoutes опции

Все тесты провалены! Итак, друзья, ждите обновления двух вышеуказанных расширений :)

Далее давайте изучим систему макета nuxt. С помощью этой настраиваемой страницы макета мы можем извлечь некоторый общий пользовательский интерфейс или код в многократно используемые компоненты макета, что очень удобно. Давайте начнем!

Макет по умолчанию

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

макеты/default.vue:

<template>
  <div>
    通用布局页，default.vue:
    <slot />
  </div>
</template>

Эффект следующий: виден или вложен в app.vue

файл пользовательского макета

Если имя файла нашего макета называется не по умолчанию, а как-то иначе, напримерcustom.vue, чтобы использовать их, вы должны установить свойства страницы на страницеlayout.

custom.vue:

<template>
  <div>
    内容来自自定义布局页custom.vue！
    <slot />
  </div>
</template>

Вы можете попробовать пользовательский макет в helloworld.vue, helloworld.vue:

<script>
export default {
  layout: "custom"
}
</script>

Пробовал, во вложенной маршрутизации нет эффекта, может это сделано намеренно

Использование NuxtLayout

Вы можете использовать компонент NuxtLayout в сочетании со слотами для полного контроля, и вам необходимо установить параметры компонентаlayout: false.

helloworld.vue

<template>
  <NuxtLayout name="custom">
    <template #header>
     <h1>hello page</h1>
    </template>
    some content...
  </NuxtLayout>
</template>
<script>
export default {
  layout: false,
};
</script>

Изменить custom.vue

<template>
  <div>
    内容来自自定义布局页custom.vue！
    <slot name="header"/>
    <slot />
  </div>
</template>

Мы даже можем объединить несколько страниц макета:

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header>
        <h1>hello page</h1>
      </template>
      some content...
    </NuxtLayout>

    <NuxtLayout name="default">
      some content...
    </NuxtLayout>
  </div>
</template>

Сотрудничать

Поскольку вам нужно установить параметр макета, используйте его одновременно с этим тегом скрипта.

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

<script setup>
// your setup script
</script>

Компоненты автоматически импортируются, и все готово! Используйте опыт разработки

Компоненты

Я предполагаю, что каждый из нас должен использовать различные импортные и раздражающие операции регистрации компонента, это nuxt давно решено, и было бы закончено!

Компоненты импортируются автоматически, а опыт разработки отличный!

Автоматический импорт компонентов

Мы помещаем компонент Vue вcomponents/Каталог, эти компоненты можно использовать на страницах и других компонентах, в прошлом нам нужно было импортировать и регистрировать их при использовании этих компонентов, но Nuxt будет импортировать их автоматически.components/Любой компонент в каталоге. Например:

| components/
--| TheHeader.vue
--| TheFooter.vue

layouts/default.vue:

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

Соглашения для имени компонентов

Компоненты без вложенности будут импортированы напрямую по имени файла, но что, если есть отношение вложенности? Например следующий путь:

| components/
--| base/
----| foo/
------| Button.vue

ТакИмена компонентов будут объединены на основе пути и имени файла., например, вышеbase/foo/Button.vueЗарегистрированное имя будетBaseFooButton, который в будущем будет выглядеть так:

<BaseFooButton />

Ленивая загрузка компонента

Если имя компонента имеет префикс Lazy, компонент может загружаться лениво по требованию, что можно использовать для оптимизации размера пакета.

Например, следующее использование:

<template>
  <div>
    <h1>Mountains</h1>
    <LazyMountainsList v-if="show" />
    <button v-if="!show" @click="show = true">显示列表</button>
  </div>
</template>

<script setup>
  import {ref} from 'vue'
  const show = ref(false)
</script>

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

Сбор данных настолько прост и удобен

Я написал последнийКомпоненты автоматически импортируются,пройти черезnuxt, нам не нужно импортировать и регистрировать компоненты при использовании компонентов, с этим покончено, и опыт разработки отличный! Но мне вдруг пришло в голову, что нам обычно нужно использовать сторонние библиотеки компонентов для разработки, так можно ли автоматически импортировать библиотеки компонентов?

Соответствующие документы см.:Версия 3. Ярость Up.org/docs/direct…

Так что если строгоnuxtПопросите определить нашу библиотеку компонентов и добавитьnuxt.jsфайла, нет проблем с автоматическим введением. Однако в двух библиотеках компонентов я пробовал:vue-devuiа такжеnaive-ui, мало подходили под его требования, поэтому все они закончились провалом! Я надеюсь, что кто-то с пониманием может бросить его, и если у вас есть решение, пожалуйста, дайте мне знать!

Так как же их представить? На самом деле получается через систему плагиновappЭкземпляры можно регистрировать вручную, так что это не большая проблема.

В этой статье, когда мы пишем компонентную логику, первое, что приходит на ум, это получить данные.

nuxt3Функции сбора данных, предусмотренные в:

• useFetch
• useLazyFetch
• useAsyncData
• useLazyAsyncData

Примечание: они оба должны быть вsetupили生命周期钩子используется в

useAsyncData

Может использоваться на страницах, компонентах или плагинахuseAsyncDataПолучите эти асинхронные данные. Например:

const {
  data: Ref<DataT>, // 返回的数据
  pending: Ref<boolean>, // 加载状态指示器
  refresh: (force?: boolean) => Promise<void>, // 强制刷新函数
  error?: any // 请求失败的错误信息
} = useAsyncData(
  key: string,// 唯一键用于多次请求结果去重
  fn: () => Object,// 返回数值的异步函数
  // lazy - 是否在路由之后才请求数据，server - 是否在服务端请求数据
  options?: { lazy: boolean, server: boolean } 
)

Получить данные о делах, index.vue:

<template>
  <div>
    <!-- 待办列表 -->
    <div v-for="todo in todos" :key="todo.id">
      <input type="checkbox" v-model="todo.completed">
      <strong>{{todo.title}}</strong>
    </div>
  </div>
</template>
<script setup lang="ts">
const { data: todos } = await useAsyncData(
  'count', () => $fetch('/api/todos'))
</script>

$fetch использовать ссылкуohmyfetch

useLazyAsyncData

Этот метод эквивалентенuseAsyncData, просто установитеlazyВариант верный, то есть он не будет блокировать маршрутную навигацию, а это значит, что нам нужно обрабатывать случай, когда данные равны нулю (или установить значение по умолчанию для параметра data по умолчанию)

useFetch

Может использоваться на страницах, компонентах или плагинахuseFetchПолучите произвольный ресурс URL.

useFetchправдаuseAsyncDataWrapper, который автоматически генерирует ключи и определяет тип ответа, что упрощает его использование.

Посмотрите на следующие сигнатуры методов, которые в основном одинаковы:

const {
  data: Ref<DataT>,
  pending: Ref<boolean>,
  refresh: (force?: boolean) => Promise<void>,
  error?: any
} = useFetch(url: string, options?)

useLazyFetch

Этот метод эквивалентенuseFetch, только настройкаlazyПараметр имеет значение true, поэтому он не будет блокировать навигацию по маршруту, что означает, что нам нужно обработать случай, когда данные равны нулю (или установить значение по умолчанию для данных с помощью параметра по умолчанию)

Лучшие практики

Выбирайте только те данные, которые вам нужны

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

Например, следующее использование:

const { data: mountain } = await useFetch('/api/mountains/everest', { 
  pick: ['title', 'description'] 
})

Создайте удобное для SSR общее состояние между компонентами

Я написал последнийРазличные позы для сбора данных, в итоге невнимательно что вспышки не было, так чтоpickНекоторые примеры неуместны:

const { data: todos } = await useFetch("/api/todo", {
  pick: ["id", "title", "completed"],
});

приводит к500Ошибка, здесь нужно объяснить, что структура данных, которую ожидает выбор, должна быть объектом, а то, что я предоставляю, представляет собой массив:

const todos = [
  { id: 1, title: 'nuxt3', completed: false },
  { id: 2, title: 'vue3', completed: true },
]
export default () => {
  return todos
}

Итак, если изменить объект:

export default () => {
  return {
    code: 1,
    data: todos
  }
}

это может быть нормальноpick:

const { data: todos } = await useFetch("/api/todo", {
  pick: ['data']
});

pickПоведение состоит в том, чтобы извлечь эти части и создать новый объект:

// 型如 { data: todos }
// 所以我之前代码：const { data: todos } = ...
// todos并非是数组而是{ data: todos }

Следовательно, использование на странице также должно соответствовать:

<div v-for="todo in todos.data" :key="todo.id">

Некоторые люди спрашивают, что, если есть требование иерархического выбора? Я думаю, что опция выбора не имеет этой возможности. Если вы хотите надежно контролировать свои данные, вам необходимоtransform:

const { data: todos } = await useFetch("/api/todo", {
  transform(input) {
    return input.data;
  },
});

Страница также может быть использована непосредственно в это времяtodos!

совместное использование состояния

Nuxt3 предоставляетuseStateСоздавайте гибкие и удобные для сервера возможности обмена состоянием между компонентами.

useStateдружит с серверомref заменять. Его значение будет сохраняться во время рендеринга на стороне сервера (во время полива на стороне клиента) и делиться между компонентами с помощью уникального ключа.

сигнатура метода

useState<T>(key: string, init?: () => T): Ref<T>

• key: уникальный ключ для дедупликации
• init: функция, которая предоставляет начальные значения

практика использования штата

Объявить состояние, index.vue

const counter = useState("counter", () => Math.round(Math.random() * 1000))

<button @click="counter++">+</button>
{{ counter }}
<button @click="counter--">-</button>

общее состояние

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

composables/useCounter.ts

export const useCounter = () =>
  useState("counter", () => Math.round(Math.random() * 1000));

Сопутствующее видео

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

space.scalescale.com/480140591/От…

ребята не забывайтеДвигай ручонками, три волны подрядПоощряйте мэра!

С данными и состоянием следующим шагом будет дальнейшее расширение возможностей фреймворка, который доступен в nuxt.pluginsа такжеmodulesДва важных метода расширения, я возьму вас учиться вместе, у вас снова болят руки, всеобращать вниманиеПсихологический массаж ☺️~

Умело используйте подключаемый механизм, чтобы усилить оружие Nuxt!

Я написал последнийсовместное использование следующего состояния, В этой статье мы изучаем систему плагинов nuxt3. Через систему плагинов мы можем получить экземпляры nuxt и vue, чтобы у нас была возможность расширить nuxt или vue, например, внедрить библиотеку пользовательского интерфейса.

каталог плагинов

Nuxt3 автоматически прочитает файлы в каталоге плагинов и загрузит их. Мы можем использовать префикс .server или .client в именах файлов, чтобы они относились только к серверу или клиенту.

Создать плагин

Зарегистрируйте плагин с помощью defineNuxtPlugin():

import { defineNuxtPlugin } from '#app'
// 唯一的参数是nuxt实例
export default defineNuxtPlugin(nuxtApp => {
  // Doing something with nuxtApp
})

Пример использования плагина: автоматическое предоставление вспомогательных методов

Распространенным приложением является предоставление некоторых дополнительных вспомогательных методов для экземпляров NuxtApp.Мы можем написать плагин для возврата объекта и установки его в нем.provideключ, например:

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: () => 'world'
    }
  }
})

Используя этот помощник, index.vue:

// 会自动加上$前缀
const { $hello } = useNuxtApp();
console.log($hello())

Вариант использования плагина: доступ к экземплярам Vue

Если мы хотим расширить Vue, нам обычно нужно получить доступ к экземпляру Vue и ввести плагин Vue. Можно получить доступ через плагины в nuxt3nuxtApp.vueApp.use(xxx)сделай это.

мы представляемvue-devuiПопробуйте, мы пытались импортировать его автоматически раньше и не удалось, здесь мы импортируем его вручную:

npm i vue-devui

Создайте плагин vue-devui-plugin.ts:

import { defineNuxtPlugin } from "#app";
import { Button } from "vue-devui";
import 'vue-devui/button/style.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Button);
});

Проверьте это с помощью компонента:

<d-button>按钮</d-button>

расширять

Результат попытки внедрить другие библиотеки компонентов:

• naive-ui использует компоненты непосредственно в SFC по официальному методу, и при импорте сообщается об ошибке, см.:GitHub.com/TU просто/это…Снова нашел этот ответ:GitHub.com/TU просто/это…Но это решение закрытоvite, не мой любимый стиль, просто для справки!

import { NButton } from 'naive-ui'

<n-button>button</n-button>

• Вант можно, но как внедрить стили по запросу пока не знаю.Напишите следующие плагины: Можете глянуть на официальном сайтеимеет планыСделать демонстрацию next3+vant

import { defineNuxtPlugin } from "#app";
import { Button } from 'vant';
import 'vant/lib/index.css'
// 这里如果引入 vant/lib/button/index.css是没有效果的
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Button)
});

• У element-plus официально есть стартовый проект:

  GitHub.com/element-runaway…

  Жаль, что он также введен полностью, и введение по требованию не объяснено, а также понятно, что автоматическое введение временно не может поддерживаться.

Я не могу больше писать, всеТри подряд поощренияДавай поговорим с главой деревни~ Я продолжу обновлять его в следующий раз!

Сопутствующее видео

я специально записалNuxt3 от входа до реального бояСерия видео, друзья, которые любят смотреть обучающие видео, не пропустите!

space.scalescale.com/480140591/От…

следующее уведомление

Используйте плагиныpluginsПозже вы обнаружите, что то, что нам нужно написать здесь, вероятно, будет повторено в следующем проекте.В nuxt также есть концепция, называемая модулем.modules, в следующий раз мы изучим использование нескольких существующих модулей и испытаем этот более эффективный способ повторного использования модулей!

Следуйте за главой деревни

Добро пожаловать, чтобы обратить внимание на мой публичный аккаунт **"Передняя часть сельской школы"**, отправьте оригинальные инновационные видео и статьи как можно скорее, и вы сможете войти"Добавить группу«Обсуждайте и учитесь с более чем 200 знаменитостями!

Все еще сомневаетесь, идти ли на тс? Садитесь в машину первым! Первый опыт разработки vue3+ts

Интервью снова произвело фурор! Что я должен делать? Практические приемы здесь!

Подготовка к 2021 году: лучшие практики проекта Vite2

Подготовка к 2021 году: инженерная практика Vite, рекомендуемая коллекция