当前位置: 首页 > news >正文

【Nuxt】内置组件和全局样式使用

内置组件

Nuxt3框架也提供一些内置的组件,常用的如下:

  • SEO组件:Html、Body、Head、Title、Meta、Style、Link、NoScript、Base
  • NuxtWelcome:欢迎页面组件,该组件是@nuxt/ui的部分
  • NuxtLayout:是Nuxt自带的页面布局组件
  • NuxtPage:是Nuxt自带的页面占位组件
    • 需要显示位于目录中的顶级或嵌套页面pages/
    • 是对router-view的封装
  • ClientOnly:该组件中默认插槽的内容只在客户端渲染
    • 而fallback插槽的内容只在服务器端渲染
  • NuxtLink:是Nuxt自带的页面导航组件
    • 是Vue Router<RouterLink>组件和HTML<a>标签的封装

在这里插入图片描述

<script setup lang="ts"></script><template><h2>这是首页</h2>
<!--  1. 普通用法--><ClientOnly fallback-tag="h3" fallback="loading..."><h3>我只会在客户端渲染</h3></ClientOnly>
<!--  2. 插槽用法--><ClientOnly><h3>我只会在客户端渲染</h3><template #fallback><h3>loading...</h3></template></ClientOnly>
</template><style scoped></style>
<template><div>
<!--    NuxtPage 是对 router-view 的封装--><NuxtPage /></div>
</template>
<script setup></script>

全局样式

基础使用:

  1. 在assets(非必须)中编写全局样式,比如:globel.scss
  2. 接着在nuxt.config中的css选项中配置
  3. 接着执行npm i -D sass即可

在这里插入图片描述
main.css

.page-container {color: hotpink;
}

global.scss

$color: lightBlue;.global-container {color: $color;
}

variables.scss

$fsColor: lightgreen;
@mixin border() {border: 1px solid $fsColor;
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({compatibilityDate: '2024-04-03',devtools: {enabled: true},css: ['@/assets/styles/main.css','@/assets/styles/global.scss']
});

index.vue

<script setup lang="ts"></script><template><h2 class="page-container">这是首页</h2><!--  1. 普通用法--><ClientOnly fallback-tag="h3" fallback="loading..."><h3 class="global-container">我只会在客户端渲染</h3></ClientOnly><!--  2. 插槽用法--><ClientOnly><h3 class="home-container">我只会在客户端渲染</h3><template #fallback><h3>loading...</h3></template></ClientOnly>
</template><style scoped lang="scss">
//第一种写法:@import 前后导入相同变量会出现覆盖的情况
//@import "@/assets/styles/variables.scss";//第二种写法:@use 使用命名空间(as * 默认不使用命名空间) 而且性能更好
@use "@/assets/styles/variables.scss" as myVariables;
.home-container {color: myVariables.$fsColor;@include myVariables.border();
}
</style>

app.vue

<template><div><div class="page-container">这是 app 页面</div><div class="global-container">这也是 app 页面</div>
<!--    NuxtPage 是对 router-view 的封装--><NuxtPage /></div>
</template>
<script setup></script>
<style scoped></style>

以上的情况配置中导入了 css 文件和 scss 全局样式文件,在单个组件中导入了 全局变量文件。

如果不在单个组件中导入 全局变量文件,也是可以在配置中导入的。

assets

index.vue

<script setup lang="ts"></script><template><h2 class="page-container">这是首页</h2><!--  1. 普通用法--><ClientOnly fallback-tag="h3" fallback="loading..."><h3 class="global-container">我只会在客户端渲染</h3></ClientOnly><!--  2. 插槽用法--><ClientOnly><h3 class="home-container">我只会在客户端渲染</h3><template #fallback><h3>loading...</h3></template></ClientOnly>
</template><style scoped lang="scss">
//第一种写法:@import 前后导入相同变量会出现覆盖的情况
//@import "@/assets/styles/variables.scss";//第二种写法:@use 使用命名空间(as * 默认不使用命名空间) 而且性能更好
//@use "@/assets/styles/variables.scss" as myVariables;
//@use "@/assets/styles/variables.scss" as *;
.home-container {color: $fsColor;@include border();
}
</style>

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({compatibilityDate: '2024-04-03',devtools: {enabled: true},css: ['@/assets/styles/main.css','@/assets/styles/global.scss'],vite: {css: {preprocessorOptions: {scss: {// 会自动给 **scss 所有模块** 引入 variables.scssadditionalData: `@import "@/assets/styles/variables.scss";`}}}}
});

在这里插入图片描述

http://www.lryc.cn/news/414966.html

相关文章:

  • Java中spring boot validation 自定义注解使用
  • Android笔试面试题AI答之广播(1)
  • 微软商店无法加载,检查你的连接-解决方案
  • 数据结构实验报告-树与二叉树
  • 基于Django+MySQL球馆场地预约系统的设计与实现(源码+论文+部署讲解等)
  • 8 MQTT
  • 【文件系统】抽象磁盘的存储结构 CHS寻址法 | sector数组 | LAB数组
  • 基于python旅游推荐系统(源码+论文+部署讲解等)
  • Mysql大单表JSON优化
  • 电脑开机启动项管理小工具,绿色免安装
  • 一例AutoHotkey语言生成的文件夹病毒分析
  • 【机器学习第7章——贝叶斯分类器】
  • C++ QT开发 学习笔记(3)
  • 【Python实战】如何优雅地实现文字 二维码检测?
  • 行为型设计模式3:模板方法/备忘录/解释器/迭代器
  • 思源笔记软件的优缺点分析
  • 追问试面试系列:Dubbo
  • 动手学深度学习V2每日笔记(卷积层)
  • qcom ucsi probe
  • flask和redis配合
  • 深度学习中的早停法
  • 科普文:JUC系列之多线程门闩同步器CountDownLatch的使用和源码
  • foreach循环和for循环在PHP中各有什么优势
  • 巧用casaos共享挂载自己的外接硬盘为局域网共享
  • 标题:解码“八股文”:助力、阻力,还是空谈?
  • 语言无界,沟通无限:2024年好用在线翻译工具推荐
  • 【Golang 面试 - 进阶题】每日 3 题(十八)
  • 二分+dp,CF 1993D - Med-imize
  • 三十种未授权访问漏洞复现 合集( 三)
  • 数据湖和数据仓库核心概念与对比