主页 > 软件开发 >

nuxt常用组件库html-validator、@nuxtjs/i18n、@nuxt/image、@unocss

软件开发
2025-09-13 09:42:01

html-validator

主要用于自动验证nuxt服务器呈现的HTML(SSR和SSG)，以检测可能导致水合错误的HTML常见问题，有助于减少水合错误，检测常见的可访问性错误。

安装 npx nuxi@latest module add html-validator

配置

若自动更新nuxt.config.ts配置文件失败，可手动添加下面代码:

nuxt3

defineNuxtConfig({ modules: [ '@nuxtjs/html-validator', //其他配置项 ] })

nuxt2.9+

export default { buildModules: ['@nuxtjs/html-validator'] }

nuxt2

export default { // Install @nuxtjs/html-validator as dependency instead of devDependency modules: ['@nuxtjs/html-validator'] }

使用

html-validator有四个选项

1.usePrettier允许更美观地打印源代码，以便在上下文中显示错误。

如果使用的是TailwindCSS，请考虑不要启用此功能，因为在开发模式下，prettier将难以处理解析HTML的大小。

2.logLevel设置详细信息为verbose、warning或error。在dev中默认为verbose，在生成时为warning。

您可以使用此配置选项来关闭控制台日志记录的No HTML validation errors found for…消息。

3.如果生成的页面有任何验证错误，failOnError将在运行nuxt generate后抛出一个错误。

在持续集成中很有用。

4.Options允许您传入html-validate选项，这些选项将与默认配置合并

更多关于配置 html- validate 的信息，可以参考官方文档。

默认配置 { htmlValidator: { usePrettier: false, logLevel: 'verbose', failOnError: false, /** A list of routes to ignore (that is, not check validity for). */ ignore: [/\.(xml|rss|json)$/], options: { extends: [ 'html-validate:document', 'html-validate:recommended', 'html-validate:standard' ], rules: { 'svg-focusable': 'off', 'no-unknown-elements': 'error', // Conflicts or not needed as we use prettier formatting 'void-style': 'off', 'no-trailing-whitespace': 'off', // Conflict with Nuxt defaults 'require-sri': 'off', 'attribute-boolean-style': 'off', 'doctype-style': 'off', // Unreasonable rule 'no-inline-style': 'off' } } } }

规则参考

html语法和概念

与HTML语法和概念相关的规则。

attr-delimiter禁止属性键和值之间有空格attr-spacing要求属性之间用空格分隔close-attr禁止结束标记具有属性close-order要求元素按正确顺序关闭element-name禁止使用无效的元素名称form-dup-name要求表单控件具有唯一的名称map-dup-name要求‘ <map name> ’是唯一的map-id-name要求name和id在<map>元素上匹配no-dup-attr禁止重复属性no-dup-class禁止重复的类no-raw-characters禁止使用未转义的特殊字符no-redundant-for禁止对属性使用冗余标签script-type要求‘ <script> ’元素的有效类型unrecognized-char-ref禁止无法识别的字符引用valid-autocomplete要求自动完成属性有效valid-id要求‘ id ’是一个有效的标识符

内容模型

attribute-allowed-values验证允许的属性值attribute-misuse要求属性在正确的上下文中使用element-permitted-content验证允许的内容element-permitted-occurrences验证允许的元素出现次数element-permitted-order验证所需的元素顺序element-permitted-parent验证允许的元素父元素element-required-ancestor验证所需的元素祖级element-required-attributes确保设置了所需的属性element-required-content确保必需的元素存在input-attributes验证输入属性的使用no-multiple-main禁用多个“<main>”script-element为‘ <script> ’要求结束标签void-content禁止包含内容的void元素

弃用规则

与已弃用或过时功能的使用相关的规则。

deprecated禁止使用废弃的元素deprecated-rule禁止使用不推荐的规则no-conditional-comment禁止使用条件注释no-deprecated-attr禁止使用弃用的属性

可行性

area-alt要求‘ <area> ’元素上的替代文本aria-hidden-body禁止在“<body>”上设置“aria-hidden”aria-label-misuse禁止误用“aria-label”empty-heading要求标题头有文字内容empty-title要求标题有文字内容hidden-focusable在可聚焦的元素上禁用“aria-hidden”input-missing-label要求输入有标签meta-refresh要求元刷新具有0秒延迟multiple-labeled-controls禁止与多个控件关联的标签no-abstract-role禁止使用抽象的WAI-ARIA角色no-autoplay禁止自动播放媒体元素no-implicit-button-type禁止隐式按钮类型no-redundant-aria-label禁止arial -label和label具有相同的文本内容no-redundant-role禁止使用冗余角色prefer-native-element更倾向使用原生HTML元素而不是角色svg-focusable要求<svg>具有可聚焦属性tel-non-breaking要求在电话号码中使用不间断字符text-content要求元素具有有效的文本内容unique-landmark要求地标有唯一的名称wcag/h30WCAG H30：提供链接文本wcag/h32WCAG H32：提供提交按钮wcag/h36WCAG H36：要求在图片上使用所有文本作为提交按钮wcag/h37WCAG H37：在img元素上使用alt属性wcag/h63WCAG H63：使用scope属性来关联标题单元格和数据单元格wcag/h67WCAG H67：在img元素上使用空alt文本和没有标题属性wcag/h71WCAG H71：为表单控件组提供描述

验证

require-csp-nonce需要CSP的资源require-sri要求资源的SRI

SEO

long-title要求标题不要有太长的文字

模式

attr-case要求属性名使用特定的大小写attr-pattern要求属性匹配已配置的模式attr-quotesRequire attribute quotingattribute-boolean-style要求属性引用attribute-empty-style为空属性要求特定的样式class-pattern要求类匹配特定的模式doctype-style需要DOCTYPE的特定案例element-case要求元素名称使用特定的大小写id-pattern要求id匹配特定的模式name-pattern要求表单控件名称匹配特定的模式no-implicit-close要求带有可选结束标签的元素显式关闭no-implicit-input-type禁止隐式输入类型no-inline-style禁止内联样式no-self-closing禁止自闭元素no-style-tag禁止使用<style>标记no-trailing-whitespace禁止尾随空格prefer-button对于按钮，更喜欢使用<button>而不是<input>prefer-tbody更喜欢把<tr>包装在<tbody>里面void-style需要一个特定的样式来关闭void元素

文档

这些规则适用于完整的单据。

allowed-links禁用链接类型doctype-html要求使用“html”文档类型heading-level要求标题从h1开始并递增1missing-doctype要求文档具有doctypeno-dup-id不允许重复的idno-missing-references要求所有元素引用都存在no-utf8-bom禁止文档具有UTF-8 BOM

未知元素

no-unknown-elements禁止使用未知元素no-unused-disable禁用未使用的禁用指令

预设配置

HTML-validate带有一些预定义的预设。

示例 .htmlvalidate.json

{ "extends": ["html-validate:PRESET"] }

示例 .htmlvalidate.cjs

const { defineConfig } = require("html-validate"); module.exports = defineConfig({ extends: ["html-validate:PRESET"], });

示例 .htmlvalidate.mjs

import { defineConfig } from "html-validate"; export default defineConfig({ extends: ["html-validate:PRESET"], });

可以设置多个预设，并将按照它们出现在“extends”中的顺序启用。

预设类型

html-validate:recommended

这是默认的预设，支持大多数规则，包括标准验证、WCAG和最佳实践。它是其他预设的超集。

html-validate:standard

启用与根据WHATWG HTML标准（生活标准）进行验证相关的规则。

如果您想要类似于Nu Html检查器和类似工具的验证，请使用此预设。

html-validate:prettier

自:v7.18.0 如果您正在使用Prettier来格式化HTML标记，则可以使用此预设来禁用诸如void-style之类的矛盾规则。这个预设应该与另一个预设（如html-validate:）结合使用，因为它只禁用规则。

html-validate:a11y

启用与可访问性相关的规则。大多数规则（但不是所有已启用的规则）都与WCAG遵从性有关。它本身不会验证文档/模板本身是否有效，而只会在发现可访问性问题时进行验证。这个预设应该与html-validate:standard一起使用，以确保文档结构是有效的（WCAG的要求），如果可能的话，还应该与html-validate:document（确保引用是有效的，等等）一起使用。

html-validate:browser

自:8.24.0 如果要从浏览器中获取源代码，请使用此预设来禁用受浏览器规范化影响的规则，例如属性布尔样式。这些规则大多只是表面上的。这个预设应该与另一个预设（如html-validate:）结合使用，因为它只禁用规则。

html-validate:document

启用需要验证完整文档的规则，即不需要验证部分模板。示例包括缺少文档类型和无效引用。将此预设与其他预设一起使用以实现全覆盖。这个预设是由cypress-html-validate和protractor-html-validate等插件启用的。

2.@nuxtjs/i18n

安装

npx nuxi@latest module add i18n

配置

{ modules: [ '@nuxtjs/i18n', ], i18n: { locales: [ { code: 'en', language: 'en-US' }, { code: 'fr', language: 'fr-FR' } ], defaultLocale: 'en', } }

实战示例

import process from 'node:process' const isDev = process.env.NODE_ENV === 'development' // const apiBaseUrl = 'http://localhost:3001' const apiBaseUrl = ' movies-proxy.vercel.app' export default defineNuxtConfig({ modules: [ '@vueuse/nuxt', '@unocss/nuxt', '@nuxt/image', '@nuxtjs/i18n', '@nuxtjs/html-validator', ], experimental: { inlineSSRStyles: false, viewTransition: true, renderJsonPayloads: true, }, routeRules: { '/**': isDev ? {} : { cache: { swr: true, maxAge: 120, staleMaxAge: 60, headersOnly: true } }, }, runtimeConfig: { public: { apiBaseUrl, }, }, devtools: { enabled: true, }, image: { provider: 'proxy', providers: { proxy: { provider: 'ipx', options: { baseURL: `${apiBaseUrl}/ipx`, }, }, }, }, nitro: { routeRules: { '/**': { isr: false }, }, }, i18n: { detectBrowserLanguage: { useCookie: true, fallbackLocale: 'en', }, strategy: 'no_prefix', locales: [ { code: 'en', name: 'English', file: 'en.json', }, { code: 'fa-IR', name: 'فارسی', file: 'fa-IR.json', }, { code: 'de-DE', name: 'Deutsch', file: 'de-DE.json', }, { code: 'es-ES', name: 'Español', file: 'es-ES.json', }, { code: 'it', name: 'Italiano', file: 'it.json', }, { code: 'ja', name: '日本語', file: 'ja.json', }, { code: 'zh-CN', name: '简体中文', file: 'zh-CN.json', }, { code: 'pt-PT', name: 'Português', file: 'pt-PT.json', }, { code: 'pt-BR', name: 'Português do Brasil', file: 'pt-BR.json', }, { code: 'ru-RU', name: 'Русский', file: 'ru-RU.json', }, { code: 'fr-FR', name: 'Français', file: 'fr-FR.json', }, { code: 'uk-UA', name: 'Українська', file: 'uk-UA.json', }, { code: 'vi', name: 'Tiếng Việt', file: 'vi.json', }, ], lazy: true, langDir: 'internationalization', defaultLocale: 'en', }, htmlValidator: { usePrettier: false, logLevel: 'verbose', failOnError: false, /** A list of routes to ignore (that is, not check validity for). */ ignore: [/\.(xml|rss|json)$/], options: { extends: [ 'html-validate:document', 'html-validate:recommended', 'html-validate:standard' ], rules: { 'svg-focusable': 'off', 'no-unknown-elements': 'error', // Conflicts or not needed as we use prettier formatting 'void-style': 'off', 'no-trailing-whitespace': 'off', // Conflict with Nuxt defaults 'require-sri': 'off', 'attribute-boolean-style': 'off', 'doctype-style': 'off', // Unreasonable rule 'no-inline-style': 'off' } } }, })

3.@nuxt/image

为nuxt优化的图像，具有渐进式处理，延迟加载，支持图像CDN，实时调整大小和提供者支持。

安装

npx nuxi@latest module add image

nuxt2 可参考 v0文档

其他相关命令

启用corepack enable

corepack enable

安装依赖项

pnpm install

生成类型存根

pnpm dev:prepare

开发模式

pnpm dev

测试添加到test/目录中

pnpm test

检查代码风格

pnpm lint

在创建PR之前

pnpm build

确保构建并没有报错

开发模式启动文档

pnpm docs:dev

打开http://localhost:3000在浏览器中查看。

更新docs/content/目录下的文档内容。

配置

在nuxt.config.ts添加模块支持

export default defineNuxtConfig({ modules: [ '@nuxt/image', ] })

边缘通道更新

在package.json 添加如下

删除lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml) 并重新安装依赖项。

退出边缘通道

删除lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml) 并重新安装依赖项。

升级最新版本

pnpm up @nuxt/image

重新创建锁文件

npx nuxt@latest upgrade --force

要配置image模块并自定义它的行为，你可以使用next .config中的image属性：

配置参数

示例

export default defineNuxtConfig({ image: { // Options } })

详细参数可参考上文实战示例，下文详细解释参数信息：

inject

默认情况下，nuxt Image v1采用可组合的方法。如果不使用这些组件，就不会向包中添加额外的代码。但是，如果您希望全局初始化将在整个应用程序中可用的 $img 帮助，则可以这样做。

示例

export default defineNuxtConfig({ image: { inject: true } })

quality

生成图像的质量。您还可以在组件级别使用质量属性覆盖此选项。

示例

export default defineNuxtConfig({ image: { quality: 80, } })

format

Default: ['webp']

您可以使用该选项为<NuxtPicture>使用的图像配置默认格式。支持的格式有webp、avif、jpeg、jpg、png和gif。

格式的顺序很重要，因为浏览器支持的第一种格式将被使用。您可以传递多个值，如['avif', 'webp']。

还可以通过使用format prop在组件级别重写此选项。

示例

export default defineNuxtConfig({ image: { format: ['webp'] } })

screens

预定义屏幕尺寸的列表。

这些大小将用于生成图像的调整大小和优化版本（例如，使用大小修改器）。

示例

export default defineNuxtConfig({ image: { // The screen sizes predefined by `@nuxt/image`: screens: { 'xs': 320, 'sm': 640, 'md': 768, 'lg': 1024, 'xl': 1280, 'xxl': 1536, '2xl': 1536 }, } })

与Tailwind CSS共享相同的命名和大小，只是增加了xs和xxl（为了向后兼容）。

domains

为了在外部网站上启用图像优化，可以指定允许优化的域。此选项将用于检测是否应该优化远程映像。这是确保外部url不会被滥用所必需的。

示例

export default defineNuxtConfig({ image: { domains: ['nuxtjs.org'] } })

presets

预设是项目的预定义配置集合。预设将帮助您统一整个项目中的图像。

示例 nuxt.config.ts

export default defineNuxtConfig({ image: { presets: { avatar: { modifiers: { format: 'jpg', width: 50, height: 50 } } } } })

示例 index.vue

providers

为了创建和使用自定义提供程序，您需要使用providers选项并定义自定义提供程序。

示例 nuxt.config.ts

export default defineNuxtConfig({ image: { providers: { random: { provider: '~/providers/random', options: {} } } } })

示例 index.vue

provider

默认值：ipx（或ipxStatic，如果与静态nitro预设一起使用，例如运行nuxt generate）我们可以指定在组件中没有指定或调用$img时使用的默认提供商。

示例 nuxt.config.ts

export default defineNuxtConfig({ image: { provider: 'twicpics', twicpics: { baseURL: ' nuxt-demo.twic.pics' } } })

modifiers

您可以为所选的提供程序设置默认修饰符。

示例

export default defineNuxtConfig({ image: { provider: 'cloudinary', cloudinary: { baseURL: ' res.cloudinary /<company>/image/fetch/', modifiers: { effect: 'sharpen:100', quality: 'auto:best', } } } })

densities

Default: [1, 2]

指定一个值来处理devicePixelRatio > 1（这些是带有视网膜显示和其他的设备）。您必须指定要为哪个devicePixelRatio值调整图像。你可以在MDN上关于devicePixelRatio的信息。

示例 nuxt.config.ts

export default defineNuxtConfig({ image: { densities: [1, 2, 3], } })

dir

Default: public

这个选项允许您在使用ipx或ipxStatic提供程序时指定源映像的位置。例如，你可能希望源图像在assets/images目录中，而不是默认的公共目录中，这样源图像就不会被复制到dist中并被部署：

示例 nuxt.config.ts

export default defineNuxtConfig({ image: { dir: 'assets/images' } })

注: 对于ipxStatic提供程序，如果在生成过程中没有抓取图像（不可访问的模式、页面或动态运行时大小），将dir从public更改将导致404错误。

对于ipx提供程序，也要确保部署自定义的目录。

对于某些提供程序（如vercel），不支持使用public/以外的目录作为资产，因为调整大小发生在运行时（而不是构建/生成时），并且从public/目录（部署URL）获取源代码。

alias

这个选项允许你为src指定别名。当使用默认的ipx提供程序时，URL别名会在服务器端缩短。这对于优化外部url而不将它们包含在HTML中特别有用。当使用其他提供程序时，别名将在运行时解析并包含在HTML中。（只是用法简化了）

示例 nuxt.config.ts

export default defineNuxtConfig({ image: { domains: [ 'images.unsplash ' ], alias: { unsplash: ' images.unsplash ' } } })

示例使用别名之前

生成

示例在使用别名之后

生成

Providers

nuxt Image支持多个提供程序以实现高性能。

简介

提供者是next Image和第三方图像转换服务之间的集成。每个提供者负责为该图像转换服务生成正确的url。

next Image可以配置为使用任何外部图像转换服务。签出侧栏以获取预配置的提供程序列表。

如果您正在寻找不受支持的特定提供程序，您可以创建自己的提供程序。

next Image将自动优化<NuxtImg>或<NuxtPicture>源，并接受指定目标的所有选项，除了特定于其他提供程序的修饰符。

默认提供者

nuxt Image的默认优化器和提供程序是ipx。任何一个选项都可以在没有任何配置的情况下使用。

本地图片

图像应该存储在项目的public/目录中。例如，当使用 <NuxtImg src="/nuxt-icon.png" /> 时，它应该放在public/文件夹下的 public/nuxt-icon.png 路径下。

注意：存储在assets/目录中的图像不会被nuxt Image处理，因为这些图像是由您的打包器（如Vite或webpack）管理的。

远程图像

使用默认提供程序，您还可以优化外部url。为此，您需要将它们添加到 domains 选项中。

还可以通过将 NUXT_IMAGE_DOMAINS 环境变量设置为逗号分隔的域列表来为远程映像添加域。

示例

NUXT_IMAGE_DOMAINS="example ,yourdomain "

环境检测

您可以使用 NUXT_IMAGE_PROVIDER 环境变量设置默认提供程序。自动检测到的提供者：

Vercel - 优化图像在Vercel的边缘网络，下文单独介绍

自定义服务提供方程序

可以定义自己的提供程序，详细了解如何创建自定义提供程序。

下文单独介绍

NuxtImg

了解如何使用和配置next Image组件。

简介

<NuxtImg>是本机<img>标记的临时替代品。

使用内置提供程序来优化本地和远程映像

将src转换为提供程序优化的url

根据宽度和高度自动调整图像大小

提供大小选项时生成响应大小

支持本机延迟加载以及其他<img>属性

用法

<NuxtImg>直接输出原生img标记（没有任何包装器）。像使用<img>标签一样使用它：

示例

输出

使用默认的提供程序，您应该将 /nuxt-icon.png 放在 public/ 目录中，以便让上面的示例工作。

元素

custom

自定义道具决定了<NuxtImg>应该作为一个简单的<img>元素呈现还是仅仅作为自定义呈现的提供者。当设置为true时，它禁用默认呈现行为，允许完全控制图像的显示方式。这对于实现自定义功能（如占位符）非常有用。当使用自定义道具时，<NuxtImg>将必要的数据和属性传递给其默认槽。你可以通过v-slot指令访问以下值： imgAttrs: <img>元素的属性（例如，alt, width, height, srcset, sizes）。

src：计算图像源URL。

isLoaded：一个布尔值，指示图像是否已加载。

示例使用

<nuxt-img src="/images/nuxt.png" alt="image" width="400" height="400" :custom="true" v-slot="{ src, isLoaded, imgAttrs }" >  <img v-if="isLoaded" v-bind="imgAttrs" :src="src" />  <img v-else src=" placehold.co/400x400" alt="placeholder" /> </nuxt-img>

这种方法确保了自定义呈现场景的灵活性，而<NuxtImg>继续在幕后处理图像优化和数据供应。

src

镜像文件路径 SRC应该是公共/目录中静态图像的绝对路径的形式。否则，提供程序期望的以/或URL开头的路径。

示例

为了在src中使用外部url进行图像优化，我们需要使用domains选项将它们列入白名单。

width / height

指定图像的宽度/高度。使用所需的宽度/高度的静态大小的图像，如图标或头像

响应式图像使用原始图像的宽度/高度（当使用大小时）

alt

尽管next Image没有应用任何特殊处理，但值得一提的是alt属性。它是一个本地全局属性，如果不能显示图像，则为图像指定替代文本。

它应该总是被提供。

如果图像包含信息，则文本应该描述图像

如果图像位于<a>元素中，文本应该解释链接的位置

如果图像仅用于装饰，则使用alt=“”

sizes

指定响应大小。这是一个以空格分隔的屏幕大小/宽度对列表。在上文nuxt.config.ts文件默认配置可以参看默认大小。默认情况下，next生成响应优先大小。如果你省略了屏幕尺寸前缀（比如sm:），那么这个尺寸就是图像的“默认”尺寸。否则，next将选择最小的大小作为图像的默认大小。

这个默认大小一直使用到下一个指定的屏幕宽度，依此类推。每个指定的尺寸对都适用-所以md:400px意味着图像将在md屏幕上的大小为400px。

例子:

densities

为增加像素密度的屏幕生成特殊版本的图像。例子:

placeholder

在实际图像完全加载之前显示占位符图像。

您还可以使用自定义道具制作任何您想要的占位符。

占位符道具可以是字符串、布尔值、数字或数组。每种情况的用法如下所示。

<NuxtImg src="/nuxt.png" placeholder />  <NuxtImg src="/nuxt.png" :placeholder="[50, 25]" />  <NuxtImg src="/nuxt.png" :placeholder="[50, 25, 75, 5]" />  <NuxtImg src="/nuxt.png" :placeholder="15" />  <NuxtImg src="/nuxt.png" placeholder="./placeholder.png" />

你也可以利用useImage（）来生成一个基于原始图像的占位符图像，如果源是SVG或者你想更好地控制修饰符，这是有用的：

placeholder-class

在使用占位符时，可以使用占位符类将类应用于原始的底层<img>元素（在呈现占位符时）。

<NuxtImg src="/nuxt.png" placeholder placeholder-class="custom" />  <NuxtImg src="/nuxt.png" placeholder :placeholder-class="custom" />

如果你只需要对加载的图像应用一些CSS，你可以这样做：

img:not(.my-placeholder-class) { /* styles here */ }

provider

使用其他提供商，而不是在nuxt .config中指定的默认提供商选项

示例 nuxt.config.ts

export default defineNuxtConfig({ image: { cloudinary: { baseURL: ' res.cloudinary /nuxt/image/upload/', }, }, })

index.vue

preset

预设是预定义的图像修改器集，可用于在项目中创建统一形式的图像。

我们可以使用next .config中的预置选项来定义预置

示例 nuxt.config.ts

export default defineNuxtConfig({ image: { presets: { cover: { modifiers: { fit: 'cover', format: 'jpg', width: 300, height: 300, }, }, }, }, })

index.vue

format

如果您想以特定格式提供图像，请使用此道具。

示例

可用的格式是webp， avif, jpeg, jpg, png， gif和svg。如果没有指定格式，它将遵循默认的图像格式。

quality

生成图像的质量。

fit

fit属性指定图像的大小。此属性可以使用五个标准值。

cover: （默认）保留宽高比，确保图像覆盖两个提供的尺寸裁剪/剪辑以适应。

contain:保留长宽比，在必要时使用“letterboxing”包含在两个提供的维度中。

fill: 忽略输入的宽高比，并拉伸到两个提供的尺寸。

inside: 保留宽高比，将图像调整为尽可能大，同时确保其尺寸小于或等于指定的两个。

outside: 保留宽高比，将图像调整为尽可能小，同时确保其尺寸大于或等于指定的尺寸。

示例

一些提供程序支持其他值。

modifiers

除了标准修饰符之外，每个提供程序可能还有自己的附加修饰符。由于这些修饰符依赖于提供程序，因此请参阅其文档以了解可以使用哪些修饰符。使用modifiers道具可以使用这些转换中的任何一种。

示例

preload

如果您想预加载图像，请使用此道具。这将在页面头部放置一个相应的 link 链接标记。

这是一个原生属性，它向浏览器提供了一个提示，告诉浏览器如何处理视图外的图像加载。自2022年3月起，所有主流浏览器的最新版本都支持它。设置loading="lazy"来延迟图像的加载，直到它出现在视窗中。

示例

nonce

这是一个本地全局属性，它定义了一个加密nonce（一次使用的数字），内容安全策略可以使用它来确定是否允许对给定元素进行给定的获取。提供nonce允许您避免使用CSP不安全的内联指令，该指令将允许列出所有内联脚本或样式。

示例

<NuxtImg src="/nuxt-icon.png" :nonce="nonce" /> <script lang="ts" setup> // useNonce不是由next /image提供的，但可能是 // 由另一个模块提供，例如nuxt-security const nonce = useNonce() </script>

Events

由<NuxtImg>和<NuxtPicture>组件包含的<img>元素发出的本地事件被重新发出，并且可以被监听。示例：监听来自<NuxtImg>的本机onLoad事件

NuxtPicture

简介

使用和配置next Picture组件

<NuxtPicture>是本机<picture>标签的临时替代品。

使用<NuxtPicture>几乎与<NuxtImg>相同，但也允许在可能的情况下提供像webp这样的现代格式。

在 MDN 上了解更多关于<picture>标签的信息。

与原生的<picture>元素不同，<NuxtPicture>目前不支持使用多个图像源。参见 #309 了解更多信息。

使用类型可以参考 NuxtImg 相同

format

图片上的格式可以用来提供多种格式的图像。将自动生成遗留格式。因此在下面的示例中，将生成avif、webp和png。它们将以与添加到format属性相同的顺序添加。

示例

格式有webp、avif、jpeg、jpg、png和gif。如果没有指定格式，它将遵循默认的图像格式。

legacyFormat

用于回退的格式。Default是有条件的： 1.如果原始格式支持透明（png， webp和gif），则使用png作为回退

2.否则，jpeg用于回退

imgAttrs

允许您在img元素上设置额外的html属性。例子:

useImage()

一个可组合的Vue，它返回一个辅助函数来生成优化的图像url。

有时，您可能需要直接使用生成的图像URL和应用的转换，而不是使用<NuxtImg>和<NuxtPicture>组件。这就是useImage（）的用途（以及它返回的辅助函数，您经常会看到它被直接引用为$img或img）。

用法

const img = useImage() img(src, modifiers, options)

示例：为backgrounimage样式生成图像URL。

const img = useImage() const backgroundStyles = computed(() => { const imgUrl = img(' github /nuxt.png', { width: 100 }) return { backgroundImage: `url('${imgUrl}')` } })

img.getSizes

const img = useImage() img.getSizes(src, { sizes, modifiers })

不稳定：getSizes API可能会改变或被移除。

参数

src: （字符串）源到原始图像的id

sizes:string）响应图像大小列表（{breakpoint}:{size}{unit}）

modifiers: （对象）传递给提供程序的用于调整大小和优化的修饰符

width:调整到指定的宽度（以像素为单位） height: 调整到指定的高度（以像素为单位） quality: 改变图像质量（0到100） format: 修改图像格式 (任何其他自定义提供程序修饰符)

options: (object)

provider: string）非默认的提供商名称（参见providers） preset: 使用预设

示例：响应srcset与Vuetify v-img

<template> <v-img :lazy-src="img(src, { width: 10, quality: 70 })" :src="img(src, { height, quality: 70 })" :srcset="_srcset.srcset" :height="height" :sizes="_srcset.sizes" /> </template> <script setup lang="ts"> const props = defineProps({ height: { type: [Number, String], default: 500 }, src: { type: String, default: '/img/header-bg.jpg' } }) const img = useImage() const _srcset = computed(() => { return img.getSizes(props.src, { sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw', modifiers: { format: 'webp', quality: 70, height: props.height } }) }) </script>

自定义服务提供方程序

如果不支持CDN提供商，您可以自己定义它。

供应商条目

运行时将接收源、映像修改器及其提供程序选项。它负责为优化的图像生成URL，并且需要是同构的，因为它可能在服务器或客户端上被调用。

示例 providers/my-provider.ts

import { joinURL } from 'ufo' import type { ProviderGetImage } from '@nuxt/image' import { createOperationsGenerator } from '#image' const operationsGenerator = createOperationsGenerator() export const getImage: ProviderGetImage = ( src, { modifiers = {}, baseURL } = {} ) => { if (!baseURL) { // also support runtime config baseURL = useRuntimeConfig().public.siteUrl } const operations = operationsGenerator(modifiers) return { url: joinURL(baseURL, src + (operations ? '?' + operations : '')) } }

参数

src: 图像的源路径。

modifiers: 在图像组件或预设中定义的图像修饰符列表。

ctx: （ImageCTX）图像模块运行时上下文 options: （CreateImageOptions）图像模块全局运行时选项 $img: $img 帮助

注意：ctx中的值可能会改变。请谨慎使用。

返回结果

url: 优化图像的绝对或相对url。

使用您的提供商

注册供应商

创建自己的提供程序之后，应该在next .config中注册它。为此，在image.provider中创建一个属性。

示例 nuxt.config.ts

export default defineNuxtConfig({ image: { providers: { myProvider: { name: 'myProvider', // optional value to overrider provider name provider: '~/providers/my-provider.ts', // Path to custom provider options: { // ... provider options baseURL: ' site ' } } } } })

通过从#image中导入，可以使用许多有用的实用程序来编写提供程序。更多信息请参见src/runtime/providers。

用法

将属性提供者设置为您的自定义提供者名称。

示例 pages/index.vue

静态图像优化静态网站图片

如果您正在使用nuxt generate构建一个静态站点，那么当您的站点生成时，nuxt Image将优化并在本地保存您的图像，并将它们与生成的页面一起部署。如果禁用服务器端渲染（在next .config中设置ssr: false），那么next Image将无法在静态生成过程中优化您的图像。在这种情况下，你可以通过使用 nitro.prerender.routes 选项告诉next预渲染图像：

示例 nuxt.config.ts

export default defineNuxtConfig({ ssr: false, nitro: { prerender: { routes: [ '/_ipx/w_120/market.jpg', '/_ipx/w_140/market.jpg', // etc. ] } } })

Providers

云服务商较多，且写法可参考上文github实例代码，可根据需要自行配置，云服务商配置

@unocss/nuxt

在正式介绍@unocss/nuxt之前先来比较一下和 @nuxtjs/tailwindcss 组件库的区别，网上有很多相关的参考，主要有以下几点：

1.性能差异原因

2.性能数据差距

3.案例分析

简介

Tailwind CSS 是一款实用性优先的 CSS 框架，它允许开发者通过简单的实用程序类快速构建设计一致性的界面。Tailwind 提供了丰富的类名，可以用来调整颜色、间距、边框、背景等等，使开发者能够快速迭代设计。此外，Tailwind 还支持自定义配置，允许扩展框架的功能。

UnoCSS 是一个按需编译的 CSS 工具，它从源代码中提取 CSS 类，并生成最小化的 CSS 文件。UnoCSS 支持广泛的类名，并且可以集成到多种构建工具中，如 Vite、Rollup 等。UnoCSS 的核心理念是减少最终输出的 CSS 文件大小，从而提高加载速度。

1.性能差异原因

UnoCSS 和 Tailwind CSS 在性能上的差异主要体现在以下几点：

文件大小：UnoCSS 通过按需编译，只保留实际使用的样式类，这使得最终生成的 CSS 文件体积远小于 Tailwind CSS。Tailwind CSS 默认情况下会打包大量的未使用样式类，即使使用 PurgeCSS 进行优化，也可能无法完全消除这些未使用的类。

构建速度：UnoCSS 利用了 Vite 的热模块替换功能，在开发过程中能够更快地进行样式更新。而 Tailwind CSS 的构建过程可能因为需要处理大量的样式类而稍显缓慢，尤其是在大规模项目中。

加载时间：由于 UnoCSS 的 CSS 文件体积较小，因此在网络传输过程中加载时间也相对较短，特别是在移动设备或网络条件较差的情况下，这种优势更加明显。

2.性能数据差距

为了量化 UnoCSS 与 Tailwind CSS 之间的性能差异，我们可以通过几个关键指标来进行比较：

CSS 文件大小：

Tailwind CSS：默认情况下，Tailwind CSS 打包后的 CSS 文件可能达到几百 KB 的大小。即使使用 PurgeCSS 来移除未使用的类，也可能只能减少到 100KB 左右。

UnoCSS：通过按需编译，UnoCSS 可以将最终 CSS 文件的大小控制在几十 KB 内，甚至更低，具体取决于实际使用的类数量。

构建时间：

Tailwind CSS：根据项目规模不同，Tailwind CSS 的构建时间可能会比 UnoCSS 多几秒到几十秒不等。这是因为 Tailwind CSS 需要处理更多的样式类。

UnoCSS：UnoCSS 通常构建速度更快，因为它只需要处理实际使用的类，减少了不必要的计算。

加载时间：

由于 UnoCSS 的 CSS 文件体积较小，加载时间也较短。假设在一个典型的网页环境中，加载时间可以从几毫秒到几百毫秒不等，具体取决于用户的网络状况。

3.案例分析

假设在一个中等规模的应用中，使用 Tailwind CSS 默认打包后的 CSS 文件大小为 300KB，而 UnoCSS 通过按需编译后仅包含实际使用的 50KB 的 CSS 规则。这意味着在初次加载时，使用 UnoCSS 的应用可以减少大约 83% 的 CSS 下载量。

假设该应用每天有数千次访问，那么节省的带宽将是显著的。同时，更快的加载速度意味着更好的用户体验，尤其是在低带宽环境下。

4.总结

尽管 UnoCSS 在生成 CSS 文件的大小和构建时间上都优于 Tailwind CSS，但选择哪一个框架还应该综合考虑项目的具体需求、团队熟悉度以及长期维护成本等因素。UnoCSS 的高度可定制性和按需编译特性使其在性能优化方面具有明显优势，但对于初学者来说，Tailwind CSS 的易用性和丰富的文档可能更具吸引力。

总的来说，UnoCSS 和 Tailwind CSS 都是优秀的工具，选择哪一种取决于项目的具体需求以及团队的技术栈偏好。在性能敏感的应用场景下，UnoCSS 提供了一个轻量级且高效的解决方案，值得开发者们尝试和探索。

文章可参考 unocss和Tailwind对比

unocss使用详解

unocss官方文档：

英文文档

中文文档

安装

pnpm add -D unocss @unocss/nuxt

在你的 Nuxt 配置文件中添加 @unocss/nuxt：

// nuxt.config.ts export default defineNuxtConfig({ modules: [ '@unocss/nuxt', ], })

配置和使用

创建一个 uno.config.ts 文件：

// uno.config.ts import { defineConfig } from 'unocss' export default defineConfig({ // ...UnoCSS 选项 })

uno.css 入口将由模块自动注入。

详细使用方法可参考文档

标签：

nuxt常用组件库html-validator、@nuxtjs/i18n、@nuxt/image、@unocss由讯客互联软件开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“nuxt常用组件库html-validator、@nuxtjs/i18n、@nuxt/image、@unocss”

上一篇
大模型分布式训练和优化

下一篇
算24点