【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.scss
                    additionalData: `@import "@/assets/styles/variables.scss";`
                }
            }
        }
    }
});