学习nuxt3笔记二-基础配置 runtimeConfig 样式 elment-plus

学习视频 www.bilibili.com/video/BV11W…

配置写在nuxt.config.ts文件里面

一：运行时全局变量 runtimeConfig

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  //运行时的一些全局变量
  runtimeConfig: {
    //只能在服务端期间收到
    count:0,
    //可以在服务端和客户端期间收到
    public: {
      baseURL: 'https:locoalhost:3000',
    },
  },
})

二：样式

新建文件

安装预处理sass -D 开发环境

npm install -D sass

1. 普通样式

在assets/css/base.scss

h1{
    color: antiquewhite;
}

在nuxt.config.ts

css:["~/assets/css/base.scss"],

2. 在预处理中定义变量

在assets/css/base.scss

$myColor: green;

在app.vue

<template>
  <div>
    <h1>1111</h1>
    <p>2222</p>
  </div>
</template>
<style scoped lang="scss">
p{
  color: $myColor;
}
</style>

在nuxt.config.ts 这里注意要将上一次引入的css样式注释掉 否则会报错 File: /Users/mac/Desktop/nuxt3/starter-3/assets/css/base.scss:1:1 [sass] Module loop: this module is already being loaded.

  //初始化样式
  // css:["~/assets/css/base.scss"],

  // 导入预处理样式定义的变量要在vite中配置 因为nuxt内嵌了vite 这个use时sass里面的
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "~/assets/css/base.scss" as *;`,
        },
      },
    },
  },

三：使用element-ui

1. 安装 element-ui[Element Plus 的核心库，包含了所有的 UI 组件和样式。] 以及element-plus/nuxt[这是为 Nuxt 提供的官方插件，它简化了 Element Plus 与 Nuxt.js 的集成，不需要手动配置 Vue 插件或导入组件。]这两个插件 element-ui官网上教程

或者nuxt官方文档

2. 在nuxt.config.ts

  modules: [
    '@element-plus/nuxt'
  ],

在app.vue

<template>
  <div>
    <h1>1111</h1>
    <p>2222</p>
    <el-button>按钮</el-button>
  </div>
</template>