参考 //页面自动加载，会自动执行。 //在前端推荐使用，不推荐 process.client onMounted(() => { console.log(699, "moundted") function x (){ console.log(722, "moundted") } x() }) onMounted(() => {

手册 Nuxt 提供了一个强大的钩子系统，可以通过钩子扩展几乎每个方面。 由于 Nuxt 整合了 Vue、Nitro 前后端两个运行时，再加上它自身的创建过程，因此框架生命周期钩子分为三类： Nuxt 钩子； Vue App 钩子； Nitro App 钩子。 const nuxtApp = useNuxtApp() eg: nuxtApp.hook("page:start",(e)=>{

<NuxtLink> 组件来处理您应用程序中的各种链接。 <NuxtLink to="/about">About page</NuxtLink> <NuxtLink :to="'/miaos/'+'@'+item.author+'/'+item.permlink"> <img width=98% mt-3

// 将 'to' 作为字符串传递 await navigateTo('/search') // ... 或者作为路由对象 await navigateTo({ path: '/search' }) // 动态路由 await navigateTo({ path: '/post/'+permlink}) //post动态页面接受方法 const route = useRoute() cosnt permlink

useRouter 返回路由器实例，必须在设置函数、插件或路由中间件中调用。 在Vue组件的模板中，你可以使用$router 来访问路由器。 const router = useRouter() //几个重要参数： url: router.name: 'user-userinfo' router.fullPath: '/user/userinfo' router.path: '/user/userinfo'

useRoute 返回当前路由， 必须在setup函数、插件或路由中间件中调用。 在Vue组件的模板中，可以使用$route访问路由。 const route = useRoute() // == $route console.log(route.path) // '/about' //获取路径id $route.params.id //除了动态参数和查询参数， useRoute()

如果您在文件名中使用方括号 [ ]，它将被转换为 动态路由 参数。您可以在文件名或目录中混合使用多个参数。 如果您希望参数是 可选的，必须使用双括号 [[]] 括起来，例如 ~/pages/[[slug]]/index.vue 或 ~/pages/[[slug]].vue 将匹配 / 和 /test。 目录结构 -| pages/ ---| index.vue ---| users-[group]/

Nuxt会自动使用Vue Router在底层创建路由，页面的名字就是路由地址。 app -> pages 文件夹，在此文件夹内创建页面。 app/pages/about.vue -> localhost:3000/about 默认情况下`app/pages/index.vue`是根路径 / //二级路由: 页面文件在一个目录下 app/pages/user/info.vue ->

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