NaiveUI的Grid栅格系统，可以布局响应式的样式。 cols number | ResponsiveDescription 24 一般是分成24列，每列用 span 表示占比 <n-grid x-gap="12" :cols="4"> <n-gi> <div class="light-green" />

layouts -> default.vue, <slot/>可以将其它页面插入 eg: <template> <div class="body"> <NavBar/> <main class="containerX"> <slot/> </main> </div>

1. plugins/目录 -> myPlugin.ts 2. myPlugin.ts export default defineNuxtPlugin(nuxtApp => { // Doing something with nuxtApp }) export default defineNuxtPlugin(() => { return { provide: { hello: (msg:

middleware 目录，Nuxt提供了一个可定制的路由中间件框架，可以在整个应用程序中使用，非常适合在导航到特定路由之前提取想要运行的代码。 //middleware -> search.js export default defineNuxtRouteMiddleware((to,from)=>{ const { type,page } = to.params const { keyword

在composables/目录中编写自己的自动导入可重用函数。但它只导入顶层函数，如有二级目录，则必须在config中配置！ export const newFun = (i) => { return i+5 } //composables/gets/foo.js imports: { dirs: ["composables/**"] },

Nuxt使用 utils/ 目录在整个应用程序中使用auto-imports自动导入辅助函数和其他实用程序! export function test2() { console.log(12793, "test.js2") } //也可以自定义导出目录 //nuxt.config.ts imports: { dirs: ["apis"] }

可组合函数: useHead， useHead只能与组件的setup和生命周期钩子一起使用 <script setup lang="ts"> useHead({ script: [ { src: ' } ] }) </script> //这里如果需要将js放置body区域末尾，直接添加参数 script: [ { src: ' body: true, //

引用本地js Nuxt入门 在Nuxt中引用第三方js等资源文件，可将文件放在/assets或/public目录下 区别 /assets目录下的文件会被webpack编译 /public目录下的文件不会被编译 第三方文件放置在/public目录下 /public/videojs/video-js.css /public/videojs/video.js

// 方法一 1. assets -> style.css 2. nuxt.config.ts中配置： css: [ '~/assets/style.css', ], // 注意： Nuxt会自动导入style.css这个文件，故可以在配置中省略！ // 方法二 //在 app.vue 中引入样式。注意不是在<style>中！ <script setup> import

全局配置 ｜ 配置 ｜ //nuxt.config.ts app: { head: { titleTemplate: "%s - 固定标题", title: "这是首页", charset: "utf-8", htmlAttrs: { lang: "zh-cn" }, meta: [ { name:

//app.config.ts export default defineAppConfig({ title: 'Hello Nuxt888', theme: { dark: true, colors: { primary: '#ff0000' } } }) //app.vue {{ appConfig.title }} const appConfig = useAppConfig()

官网 ｜ 说明 ｜ yarn add @iconify-json/mdi //注意按需安装！ //1.2.3 //yarn add @iconify-json/vscode-icons <div class="i-mdi-github text-3xl" /> <div class="i-mdi-twitter" /> <div

/* //常用语句 */ bg-purple-100 背景颜色 text-purple-100 文本颜色 text-center 水平对齐 可用于字体和按键的中心对齐 align-middle 垂直对齐 !w-[80%] //width: 80% !important; shadow-sm 盒子阴影 cursor-pointer 指针样式 outline-none 无边框 font-italic 斜体

原子化css | 互动样式 ｜ 样式参考 ｜ Tailwind CSS ｜ 颜色样式 ｜ 加深理解inline、block、inline-block 可以认为Unocss兼具了TailwindCSS 和 Windicss的优点，同时还具有自身的定制性和灵活性。按需引入，体积小，速度快。 1. 基本使用，可以直接在class中定义。在Unocss省略class直接写样式也是可以的，而且有代码提示。 <div

这是一个按需原子化 CSS 引擎，比起直接使用 TailwindCSS 更轻更快！ 它的预设样式可以直接使用 TailwindCSS 和 Windicss 的样式。 yarn add unocss @unocss/nuxt //^66.5.2 //1. 配置模块，nuxt.config.ts： modules: [ '@unocss/nuxt', ], //2. 根目录创建 uno.config.ts

官网 ｜ 安装指南 ｜ 安装指南2 ｜ naive-ui-nuxt ｜ yarn add naive-ui //^2.43.1 1. nuxt.config.ts build: { transpile: ['naive-ui', "vueuc"] }, 2. app -> plugins -> naiveui.ts //把以下代码写入naiveui.ts import

浏览器和服务器都可以解释JavaScript代码，将Vue.js组件渲染成HTML元素。这个步骤被称为渲染。Nuxt支持客户端和通用呈现。 客户端渲染 - CSR， 例如 Vue.js、React 通用渲染 - SSR, 例如 Nuxt、Next.js 静态站点生成 - SSG； 混合渲染 - 混合呈现允许每个路由使用路由规则不同的缓存规则，并决定服务器应该如何响应给定URL上的新请求。例如

Nuxt是一个全栈框架，这意味着在不同的上下文中，有几种不可避免的用户运行时错误来源: Vue渲染生命周期中的错误(SSR + SPA) API或Nitro服务器生命周期中的错误 服务器和客户端启动错误(SSR + SPA) //全局错误页面 error.vue <template> <div class="pt-[50px]"> <n-result

"nuxt": ^4.3.1 nodejs: v22.17.1 1. 直接到github下载模板， - 也可以用npm安装 npm create nuxt <project-name> eg:npm create nuxt nuxtdemo - 更改配置： package.json -> name 2. npm install --global yarn //yarn

官网 | 中文文档 | 中文文档2 | nuxt-modules | naive ui | Unocss | windicss | windicss github | Nuxt 3.0 全栈开发视频 | 蒂莎网 ｜ 蒂莎api ｜