【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";`}}}}
});