Nuxt 菜鸟入门学习笔记五:CSS 样式

这篇具有很好参考价值的文章主要介绍了Nuxt 菜鸟入门学习笔记五:CSS 样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


Nuxt 菜鸟入门学习笔记五:CSS 样式,前端实践,前端基础,Nuxt,SSR,服务端渲染
Nuxt 官网地址: https://nuxt.com/

Nuxt 在样式设计方面非常灵活。

  • 可以编写自己的样式;
  • 可以引用本地和外部样式表;
  • 可以使用 CSS 预处理器、CSS 框架、UI 库和 Nuxt 模块来为应用程序设计样式。

本地样式表

按照惯例,将本地样式表放在assets/目录下。

在组件内导入

在组件内导入的样式表将在 Nuxt 渲染的 HTML 中内联。可以通过以下方式导入:

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

代码示例:

  1. 创建 /assets/css/first.css 文件,内容如下:
// assets/css/first.css

.first {
  background-color: red;
}
  1. 在页面中导入,并应用:
// pages/about.vue

<template>
  <div>
    <h1>@ index page</h1>
    <AppAlert class="first">AppAlert Component.</AppAlert>
  </div>
</template>

<script>
// 使用静态导入以实现服务器端兼容性
// import "~/assets/css/first.css";

// 注意:动态导入与服务器端不兼容
// import("~/assets/css/first.css");
</script>

<style>
@import url("~/assets/css/first.css");
</style>

通过 Nuxt 配置 CSS 属性导入

可以在 Nuxt 配置中使用 css 属性来导入本地样式表,Nuxt 将把它包含到应用程序的所有页面中。这种方式导入样式表也将在 Nuxt 渲染的 HTML 中内联,全局注入并出现在所有页面中。

注意:即便页面中没有用到样式表中的样式规则,也会注入并在 HTML 中内联。

代码示例:

  1. 创建 /assets/css/main.css 文件,内容如下:
// assets/css/main.css

.text-bold {
  font-weight: bold;
}
  1. 在 Nuxt 配置中导入:
// nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  pages: true,
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/scss/_colors.scss" as *;',
        },
      },
    },
  },
  // 导入本地样式表
  css: ["~/assets/css/main.css"],
});
  1. 在页面中导入,并应用:
// pages/about.vue

<template>
  <div>
    <h1>@ index page</h1>
    <AppAlert class="first text-bold">AppAlert Component.</AppAlert>
  </div>
</template>

<script>
// 使用静态导入以实现服务器端兼容性
// import "~/assets/css/first.css";

// 注意:动态导入与服务器端不兼容
// import("~/assets/css/first.css");
</script>

<style>
@import url("~/assets/css/first.css");
</style>

使用字体

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

代码示例:

  1. 在 css 文件引用字体,并在样式中使用:
// assets/css/main.css

.text-bold {
  font-weight: bold;
}

// 引用定义字体
@font-face {
  font-family: "MyFont";
  src: url("/fonts/test.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

// 样式汇中使用字体
.cool-text {
  font-family: "MyFont";
  font-size: 22px;
}
  1. 在样式表、页面或组件中通过样式应用字体:
// pages/index.vue

<template>
  <div>
    <h1>@ index page</h1>
    <AppAlert class="first text-bold">AppAlert Component.</AppAlert>
    <p class="cool-text">爱拼才会赢!</p>
  </div>
</template>

导入通过 NPM 发布的样式表

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

  1. 先安装 animate.css 库:
pnpm add animate.css
  1. 导入 animate.css:
  • 在页面、布局和组件中直接引用:
// pages/index.vue

<script>
// 通过js导入
import "animate.css";
</script>

<style>
// 通过css导入
@import url("animate.css");
</style>
  • 在 Nuxt 配置的 css 属性中导入:
// nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  pages: true,
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/scss/_colors.scss" as *;',
        },
      },
    },
  },
  css: ["~/assets/css/main.css", "animate.css"],
});
  1. 使用 animate.css 的动画样式:
<template>
  <div>
    <h1>@ index page</h1>
    <AppAlert class="first text-bold">AppAlert Component.</AppAlert>
    <p class="cool-text animate__animated animate__bounceIn">爱拼才会赢!</p>
  </div>
</template>

<script>
// 使用静态导入以实现服务器端兼容性
// import "~/assets/css/first.css";

// 注意:动态导入与服务器端不兼容
// import("~/assets/css/first.css");

// import "animate.css";
</script>

<style>
@import url("~/assets/css/first.css");
/* @import url("animate.css"); */
</style>

外部样式表

通过在 nuxt.config 文件的 head 部分添加链接元素,就可以在应用程序中包含外部样式表。我们可以使用 Nuxt 配置中的 app.head 属性来操作头部:

// nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  pages: true,
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/scss/_colors.scss" as *;',
        },
      },
    },
  },
  css: ["~/assets/css/main.css"],
  app: {
    head: {
      link: [
        {
          rel: "stylesheet",
          href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
        },
      ],
    },
  },
});

当然还可以使用不同的方法实现这一结果,而且本地样式表也可以这样包含。

动态添加样式表

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

useHead({
  link: [
    {
      rel: "stylesheet",
      href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
    },
  ],
});

注意: 这种方式目前使用体验不是很好,如果要使用这种方式,需要做更多技术实践。

【高级】使用 Nitro 插件修改渲染的头部

如果需要更高级的控制,可以使用钩子拦截渲染的 html,并以编程方式修改头部。
此处暂不介绍,如有兴趣,提供官方链接:https://nuxt.com/docs/getting-started/styling#dynamically-adding-stylesheets

使用预处理器

常用预处理器 SCSS、Sass、Less 或 Stylus 等,使用前需要先安装。
本文以 SCSS 为例:

  1. 进行安装:
pnpm add sass
  1. 创建 scss 文件:
// assets/scss/main.scss

.parent {
  background-color: #eee;
  padding: 20px;

  .child {
    background-color: aquamarine;
    padding: 20px;
  }
}
  1. 两种导入方式:
  • 可以在页面、布局和组件中使用预处理器的语法导入源文件。

    <style lang="scss">
    @use "~/assets/scss/main.scss";
    </style>
    
  • 可以使用 Nuxt 配置文件中 css 属性全局导入。

    export default defineNuxtConfig({
      css: ["~/assets/scss/main.scss"],
    });
    

无论使用上面的哪种导入方式,编译后的样式表将被内联到 Nuxt 渲染的 HTML 中。

如果你需要在预处理文件中注入代码,比如带有颜色变量的 sass 部分,你可以使用 vite 预处理器选项来实现。(前一篇文章静态资源中全局样式导入有样式实现,或者参考官方文档:https://nuxt.com/docs/getting-started/styling#dynamically-adding-stylesheets)
Nuxt 默认使用 Vite。如果希望使用 webpack,请参阅每个预处理器加载器的文档。

单文件组件 SFC 样式

Vue 和 SFC 最棒的地方之一就是它能很自然地处理样式。可以直接在组件文件的样式块中编写 CSS 或预处理代码,因此无需使用 CSS-in-JS 之类的东西就能获得绝佳的开发体验。

【拓展】如果你想使用 CSS-in-JS,你可以找到支持它的第三方库和模块,比如 pinceau。可以参考Vue 文档,获取关于SFC中组件样式的全面参考。

类和样式绑定

在 Vue 的 SFC 组建中,可以通过类和样式属性来为组件设置样式。
详细内容请阅读 Vue 文档:Class 与 Style 绑定

使用 v-bind 的动态样式

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

// pages/test.vue

<script setup>
const color = ref("red");
setTimeout(() => {
  color.value = "yellow";
}, 3000);
</script>

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

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

Scoped Styles

范围属性允许对组件进行独立样式化。使用该属性声明的样式将仅适用于该组件。

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

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

更多内容请阅读 Vue 文档:单文件组件 CSS 功能

CSS Modules

可以通过 module 属性使用 CSS 模块。使用注入的 $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>

使用 PostCSS

科普:PostCSS 是什么?
PostCSS 是一个使用 JS 插件转换 CSS 的工具。这些插件可以支持变量和混合、transpile 未来 CSS 语法、内联图像等。
官网链接:https://www.postcss.com.cn/

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

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

为了在 SFC 中使用正确的语法高亮,可以使用 postcss lang 属性。

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

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

  • postcss-import: Improves the @import rule
  • postcss-url: Transforms url() statements
  • autoprefixer: Automatically adds vendor prefixes
  • cssnano: Minification and purge

利用布局实现多种风格

如果需要为应用程序的不同部分设计完全不同的布局样式,可以使用布局。
布局在上一篇文章的视图章节有简单介绍,此处不做更多讲解,后续专门用一篇文章来细说。

第三方库和模块

在样式设计方面,Nuxt 并不墨守成规,而是为我们提供了多种选择。可以使用任何想要的样式工具,如 UnoCSS 或 Tailwind CSS 等流行库。社区和 Nuxt 团队开发了大量的 Nuxt 模块,使集成变得更加容易。可以在网站的模块部分找到它们。这里有几个模块可以帮助我们开始使用:

  • UnoCSS: Instant on-demand atomic CSS engine
  • Tailwind CSS: Utility-first CSS framework
  • Fontaine: Font metric fallback
  • Pinceau: Adaptable styling framework
  • NuxtLabs UI

轻松加载网络字体

可以使用Nuxt Google Fonts 模块来加载 Google Fonts。
如果使用的是UnoCSS,请注意它自带了一个网页字体预设,可以方便地加载来自常见供应商的字体,包括 Google Fonts 等。文章来源地址https://www.toymoban.com/news/detail-689737.html

到了这里,关于Nuxt 菜鸟入门学习笔记五:CSS 样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端|CSS系列第2篇】CSS零基础入门之常用样式属性

    欢迎来到CSS零基础入门系列的第二篇博客!作为前端开发的关键技术之一,CSS(层叠样式表)能够为网页添加各种样式和布局效果。对于前端零基础的小白来说,了解和掌握CSS的常用样式属性是入门的关键。本篇博客将带你深入了解如何设置常用样式属性,包括文本属性、字

    2024年02月11日
    浏览(68)
  • 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(59)
  • 【Web前端入门学习】—CSS

    什么是CSS? CSS全名是 Cascading Style Sheets ,中文名:叠层样式表。用于定义网页样式和布局的样式表语言。通过CSS,你可以指定页面中各个元素的字体、大小、间距、边框、背景等样式从而实现更精确的页面设计。 CSS通常由选择器、属性和属性值构成,多个规则可以组合在一

    2024年03月11日
    浏览(44)
  • 前端学习笔记:CSS中浮动的原理,定位

    这是本人学习的总结,主要学习资料如下 马士兵教育 float设计的初衷是为了有文字环绕图片的效果,比如下图。 所以有浮动效果的元素一定不会遮挡其他元素的文字。比如有两个 div ,两个 div 都有文字,正常文字在 div 左上角。 我们设置一个浮动一个不浮动,我们会看到浮

    2024年02月03日
    浏览(53)
  • 前端食堂技术周刊第 96 期:2023 CSS 状态、Nuxt 3.7、TypeScript 5.2、eBay 性能优化、贝塞尔曲线

    美味值:🌟🌟🌟🌟🌟 口味:冰镇黑乌龙 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly 大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看下上周的技术资讯。 Nuxt 3.7 发布,新版 CLI、原生 Web Stream 和 Response、HTML 渲染优化、实验性支持 async context。 pnpm v

    2024年02月11日
    浏览(41)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(65)
  • 前端-CSS 字体和文本样式

    字体大小 字体粗细 字体样式 字体系列 文本缩进 取值 数字 + px 数字 + em(推荐:1em=当前标签的 font-size 大小) 文本水平对齐方式 内容居中需要给父元素设置居中属性 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ENfm2r2-1688123416662)(https://note.youda

    2024年02月11日
    浏览(118)
  • Golang快速入门到实践学习笔记

    Go程序设计的一些规则 Go之所以会那么简洁,是因为它有一些默认的行为: 大写字母开头的变量是可导出的,也就是其它包可以读取 的,是公用变量;小写字母开头的就是不可导出的,是私有变量。 大写字母开头的函数也是一样,相当于class 中的带public的公有函数;

    2024年02月20日
    浏览(53)
  • 前端= 结构(HTML)+ 样式(CSS)+ 行为(JavaScript)

    前端开发确实涵盖了行为(JavaScript)、样式(CSS)和结构(HTML)这三个主要方面。这三个方面在前端开发中密切协作,共同构建用户界面和用户体验。 结构(Structure):HTML 是用于定义页面结构的标记语言。通过使用 HTML 标签,可以创建网页的基本骨架,包括标题、段落、

    2024年02月13日
    浏览(59)
  • 前端必备精美CSS样式,不来瞅瞅吗?

    我特别喜欢收集前端好看的特效代码,前端好用的网站。今天给大家分享出来,如果觉得有帮助可以 点赞收藏支持一下 ,如果能 关注 一下就再好不过了ヾ(≧▽≦*)o,之后还会分享许多干货,话不多说,上动图(网站在文章末尾): 目录 🍓按钮系列 🍇多选框系列 🍈开关

    2024年02月12日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包