nuxt的安装及目录结构

//nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: "2024-08-01",
  // devtools: { enabled: false },
  modules: ["@unocss/nuxt", "@element-plus/nuxt"],
...
```
 4.unocss官方配置
在项目根目录新建unocsss.config.ts,都是官方推荐配置，不好说啥
```js
// uno.config.ts
import presetRemToPx from "@unocss/preset-rem-to-px";
import {
  defineConfig,
  presetAttributify,
  presetIcons,  //这个可以不用把图标名字写在class里面，图标是块元素
  presetTypography,
  presetUno,   //预置的比如 mt-1   === mragin-top:1px 的简介写法。
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";


export default defineConfig({
  shortcuts: [
    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
  ],
  theme: {
    colors: {
      // ...
    },
  },
  presets: [
    presetUno(),
    presetRemToPx({
      baseFontSize: 4,
    }),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});

 1.安装 pnpm add -D @unocss/preset-wind   pnpm i @iconify-json/ep @unocss/preset-rem-to-px @unocss/transformer-directives

@unocss/preset-wind               # Tailwind CSS 的预设

@iconify-json/ep                  # 一个巨大的图标库  

@unocss/preset-rem-to-px          #设置1em =x px,

@unocss/transformer-directives    # 可以使用@apply // 2. uno.config.tsimport { defineConfig } from 'unocss'import presetWind from '@unocss/preset-wind'

export default defineConfig({  presets: [    presetWind(),  ],})

 ...

nuxt-project/│├── .nuxt/                  # 自动生成的目录，包含运行时的 Nuxt.js 应用代码├── assets/                 # 存放需要 Webpack 处理的静态资源│   ├── css/│   ├── js/│   └── images/│├── components/             # Vue 组件目录，存放可复用的 Vue 组件│   ├── MyButton.vue│   └── Header.vue│├── layouts/                # 布局组件目录，定义应用的布局结构│   ├── default.vue│   └── custom.vue│├── middleware/             # 中间件目录，存放应用的中间件│   ├── auth.js│   └── locale.js│├── pages/                  # 页面组件目录，存放根据文件结构自动生成路由的 Vue 组件│   ├── index.vue│   ├── about/│   │   └── index.vue│   └── user/│       ├── _id.vue│       └── index.vue│├── plugins/                # 插件目录，存放需要在应用启动时加载的 JavaScript 插件│   ├── axios.js│   └── vuetify.js│├── static/                 # 存放不需要 Webpack 处理的静态资源│   ├── favicon.ico│   └── robots.txt│├── store/                  # Vuex 状态管理目录，存放应用的状态管理代码│   ├── index.js│   └── modules/│       ├── cart.js│       └── user.js│├── nuxt.config.js          # Nuxt.js 配置文件，用于配置应用的全局行为├── package.json            # 项目依赖和脚本配置└── README.md               # 项目说明文档

// https://nuxt.com/docs/api/configuration/nuxt-configimport { defineNuxtConfig } from "nuxt/config";export default defineNuxtConfig({  compatibilityDate: "2024-08-01",  // devtools: { enabled: false },  modules: ["@unocss/nuxt", "@element-plus/nuxt"],  css: ["@unocss/reset/tailwind-compat.css"],//css和下面vite的引入都是全局引入//但是经过实践，scss全局引入要写到下面的vite里面去，两者二选一。  vite: {//不要新建viteconfig.ts文件,像这样子配置vite    css: {      preprocessorOptions: {        scss: {          additionalData: ` @use "@/assets/element/replace.scss" as *;                           @use "assets/variables.scss" as* ;                          `,        },      },    },

  },  elementPlus: {    importStyle: "scss",    // themes:["dark"]  },  router: {},
//常量配置，public是客户端可以访问到的

  runtimeConfig:{    count:1,    apiSecret: '',// 可以由 NUXT_API_SECRET 环境变量覆盖    public:{      apiBase:process.env.NUXT_API_BASE,      // 可以由 NUXT_PUBLIC_API_BASE 环境变量覆盖    },     },
    $production: {      routeRules: {        '/**': { isr: true }      }    },    $development: {      //    },

  });