使用 Vue & UI Pro 的仪表板模板

样式

了解如何为您的 Nuxt 应用程序设置样式。

Nuxt 在样式方面非常灵活。编写您自己的样式,或引用本地和外部样式表。您可以使用 CSS 预处理器、CSS 框架、UI 库和 Nuxt 模块来为您的应用程序设置样式。

本地样式表

如果您正在编写本地样式表,自然应该将它们放在 assets/ 目录 中。

在组件中导入

您可以在页面、布局和组件中直接导入样式表。您可以使用 JavaScript 导入或 CSS @import 语句

pages/index.vue
<script>
// Use a static import for server-side compatibility
import '~/assets/css/first.css'

// Caution: Dynamic imports are not server-side compatible
import('~/assets/css/first.css')
</script>

<style>
@import url("~/assets/css/second.css");
</style>
样式表将被内联到 Nuxt 渲染的 HTML 中。

CSS 属性

您也可以在 Nuxt 配置中使用 css 属性。您的样式表的自然位置是 assets/ 目录。然后您可以引用其路径,Nuxt 将将其包含到应用程序的所有页面中。

nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})
样式表将被内联到 Nuxt 渲染的 HTML 中,全局注入并存在于所有页面中。

使用字体

将您的本地字体文件放在 ~/public/ 目录中,例如在 ~/public/fonts 中。然后您可以使用 url() 在样式表中引用它们。

assets/css/main.css
@font-face {
  font-family: 'FarAwayGalaxy';
  src: url('/fonts/FarAwayGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

然后在您的样式表、页面或组件中按名称引用您的字体

<style>
h1 {
  font-family: 'FarAwayGalaxy', sans-serif;
}
</style>

通过 NPM 分发的样式表

您还可以引用通过 npm 分发的样式表。让我们以流行的 animate.css 库为例。

终端
npm install animate.css

然后您可以在页面、布局和组件中直接引用它

app.vue
<script>
import 'animate.css'
</script>

<style>
@import url("animate.css");
</style>

该包也可以在 Nuxt 配置的 css 属性中作为字符串引用。

nuxt.config.ts
export default defineNuxtConfig({
  css: ['animate.css']
})

外部样式表

您可以通过在 nuxt.config 文件的 head 部分添加链接元素来在应用程序中包含外部样式表。您可以使用不同的方法来实现此结果。请注意,本地样式表也可以像这样包含。

您可以使用 Nuxt 配置的 app.head 属性来操作 head

nuxt.config.ts
export default 
defineNuxtConfig
({
app
: {
head
: {
link
: [{
rel
: 'stylesheet',
href
: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
} } })

动态添加样式表

您可以使用 useHead 组合函数在代码中动态设置 head 中的值。

文档 > API > 组合函数 > 使用 Head 中了解更多信息。
useHead
({
link
: [{
rel
: 'stylesheet',
href
: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
})

Nuxt 在后台使用 unhead,您可以参考其完整文档 这里

使用 Nitro 插件修改渲染的 Head

如果您需要更高级的控制,您可以使用钩子拦截渲染的 html 并以编程方式修改 head。

~/server/plugins/my-plugin.ts 中创建一个插件,如下所示

server/plugins/my-plugin.ts
export default 
defineNitroPlugin
((
nitro
) => {
nitro
.
hooks
.
hook
('render:html', (
html
) => {
html
.
head
.
push
('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">')
}) })

外部样式表是阻塞渲染的资源:它们必须在浏览器渲染页面之前加载和处理。包含不必要的大型样式的网页渲染时间更长。您可以在 web.dev 上了解更多信息。

使用预处理器

要使用像 SCSS、Sass、Less 或 Stylus 这样的预处理器,请先安装它。

npm install sass

编写样式表的自然位置是 assets 目录。然后,您可以使用预处理器的语法在您的 app.vue(或布局文件)中导入源文件。

pages/app.vue
<style lang="scss">
@use "~/assets/scss/main.scss";
</style>

或者,您可以使用 Nuxt 配置的 css 属性。

nuxt.config.ts
export default 
defineNuxtConfig
({
css
: ['~/assets/scss/main.scss']
})
在这两种情况下,编译后的样式表都将内联在 Nuxt 渲染的 HTML 中。

如果您需要在预处理文件中注入代码,例如带有颜色变量的 sass 部分,您可以使用 vite 预处理器选项

在您的 assets 目录中创建一些部分

$primary: #49240F;
$secondary: #E4A79D;

然后在您的 nuxt.config

export default 
defineNuxtConfig
({
vite
: {
css
: {
preprocessorOptions
: {
scss
: {
additionalData
: '@use "~/assets/_colors.scss" as *;'
} } } } })

Nuxt 默认使用 Vite。如果您希望使用 webpack,请参考每个预处理器加载器的 文档

单文件组件 (SFC) 样式

Vue 和 SFC 最棒的一点是它在处理样式方面非常出色。您可以在组件文件的 style 块中直接编写 CSS 或预处理器代码,因此您将拥有出色的开发体验,而无需使用像 CSS-in-JS 这样的东西。但是,如果您希望使用 CSS-in-JS,您可以找到支持它的第三方库和模块,例如 pinceau

您可以参考 Vue 文档,以全面了解在 SFC 中为组件设置样式。

类和样式绑定

您可以利用 Vue SFC 功能,使用类和样式属性为组件设置样式。

<script setup lang="ts">
const isActive = ref(true)
const hasError = ref(false)
const classObject = reactive({
  active: true,
  'text-danger': false
})
</script>

<template>
  <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :class="classObject"></div>
</template>

有关更多信息,请参阅 Vue 文档

使用 v-bind 的动态样式

您可以在样式块中使用 v-bind 函数引用 JavaScript 变量和表达式。绑定将是动态的,这意味着如果变量值发生变化,样式将被更新。

<script setup lang="ts">
const color = ref("red")
</script>

<template>
  <div class="text">hello</div>
</template>

<style>
.text {
  color: v-bind(color);
}
</style>

作用域样式

scoped 属性允许您隔离地为组件设置样式。使用此属性声明的样式将仅应用于此组件。

<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

CSS 模块

您可以使用 CSS 模块 和 module 属性。使用注入的 $style 变量访问它。

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

预处理器支持

SFC 样式块支持预处理器语法。Vite 内置支持 .scss、.sass、.less、.styl 和 .stylus 文件,无需配置。您只需要先安装它们,它们就可以直接在 SFC 中使用 lang 属性使用。

<style lang="scss">
  /* Write scss here */
</style>

您可以参考 Vite CSS 文档@vitejs/plugin-vue 文档。对于 webpack 用户,请参考 vue 加载器文档

使用 PostCSS

Nuxt 内置了 postcss。您可以在 nuxt.config 文件中配置它。

nuxt.config.ts
export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nested': {}
      "postcss-custom-media": {}
    }
  }
})

为了在 SFC 中正确突出显示语法,您可以使用 postcss lang 属性。

<style lang="postcss">
  /* Write postcss here */
</style>

默认情况下,Nuxt 已经预先配置了以下插件

利用布局实现多种样式

如果您需要以完全不同的方式为应用程序的不同部分设置样式,可以使用布局。为不同的布局使用不同的样式。

<template>
  <div class="default-layout">
    <h1>Default Layout</h1>
    <slot />
  </div>
</template>

<style>
.default-layout {
  color: red;
}
</style>
文档 > 指南 > 目录结构 > 布局 中了解更多信息。

第三方库和模块

Nuxt 在样式方面没有偏好,并为您提供了多种选择。您可以使用任何您想要的样式工具,例如流行的库,如 UnoCSSTailwind CSS

社区和 Nuxt 团队开发了许多 Nuxt 模块,使集成变得更加容易。您可以在网站的 模块部分 上发现它们。以下是一些帮助您入门的模块

  • UnoCSS: 即时的按需原子 CSS 引擎
  • Tailwind CSS: 实用优先的 CSS 框架
  • Fontaine: 字体度量回退
  • Pinceau: 可适应的样式框架
  • Nuxt UI: 用于现代 Web 应用程序的 UI 库
  • Panda CSS: 在构建时生成原子 CSS 的 CSS-in-JS 引擎

Nuxt 模块为您提供了开箱即用的良好开发体验,但请记住,如果您的最爱工具没有模块,并不意味着您不能在 Nuxt 中使用它!您可以为自己的项目自行配置它。根据工具的不同,您可能需要使用 Nuxt 插件 和/或 创建自己的模块。如果您这样做,请与 社区 分享。

轻松加载网络字体

您可以使用 Nuxt Google Fonts 模块 加载 Google Fonts。

如果您使用的是 UnoCSS,请注意它附带一个 网络字体预设,可以方便地从常见提供商(包括 Google Fonts 等)加载字体。

高级

过渡

Nuxt 带有与 Vue 相同的 <Transition> 元素,并且还支持实验性的 视图过渡 API

文档 > 入门 > 过渡 中了解更多信息。

字体高级优化

我们建议使用 Fontaine 来减少您的 CLS。如果您需要更高级的功能,请考虑创建一个 Nuxt 模块来扩展构建过程或 Nuxt 运行时。

始终牢记利用 Web 生态系统中提供的各种工具和技术来使您的应用程序样式更轻松、更高效。无论您使用的是原生 CSS、预处理器、postcss、UI 库还是模块,Nuxt 都能满足您的需求。祝您样式设计愉快!

LCP 高级优化

您可以执行以下操作来加快全局 CSS 文件的下载速度

  • 使用 CDN,以便文件在物理上更靠近您的用户
  • 压缩您的资产,理想情况下使用 Brotli
  • 使用 HTTP2/HTTP3 进行交付
  • 将您的资产托管在同一个域上(不要使用不同的子域)

如果您使用的是 Cloudflare、Netlify 或 Vercel 等现代平台,大多数这些操作都应该自动为您完成。您可以在 web.dev 上找到 LCP 优化指南。

如果您的所有 CSS 都由 Nuxt 内联,您可以(实验性地)完全阻止外部 CSS 文件在渲染的 HTML 中被引用。您可以通过一个钩子来实现这一点,您可以将它放在模块中,也可以放在您的 Nuxt 配置文件中。

nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'build:manifest': (manifest) => {
      // find the app entry, css list
      const css = manifest['node_modules/nuxt/dist/app/entry.js']?.css
      if (css) {
        // start from the end of the array and go to the beginning
        for (let i = css.length - 1; i >= 0; i--) {
          // if it starts with 'entry', remove it from the list
          if (css[i].startsWith('entry')) css.splice(i, 1)
        }
      }
    },
  },
})