//开发环境 //package.json "dev": "nuxt dev --port 3200" // 或是这样： "config": { // here are the changes "nuxt": { "host": "0.0.0.0", "port":

SSR 默认情况下，直接执行(nuxt build) yarn build。代码会被打包到.output目录，打包产物分为 public 和 server 两部分。入口为 index.mjs，可以使用 node 或 pm2 等进程管理工具启动服务, node ./.output/server/index.mjs，也可以配合nuxt preview启动预览服务。

server/utils 目录中的工具函数，会自动导入 若用默认导出 export default ，则自动导入的函数名为文件名 若用具名导出 export function useSum ，则自动导入的函数名为函数定义的名称。 // server/utils/sum.ts export function useSum(a: number, b: number) { return a + b; }

文档 服务器 Server Nuxt具备的类似于express的功能，具有接受和响应http的能力。 Nuxt自动扫描~/server/api, ~/server/routes, 和 ~/server/middleware目录中的文件，以注册具有HMR支持的API和服务器处理程序。 每个文件都应该导出一个用defineEventHandler()定义的默认函数。

在你的页面中，组件和插件你可以使用useCookie，一个SSR友好的组合来读写cookies。 const cookie = useCookie(name, options) eg: const counter = useCookie('counter', { maxAge: 60 }) //60秒有效期 counter.value = { name: "hello", age:

useState用于创建响应式的且服务端友好的跨组件状态，类似于Vue中的state的功能。 简单的需求只用useState就可以，复杂的话可以结合pinia const counter = useState('counter', () => Math.round(Math.random() * 1000)) counter++ counter.value = 20 //重新赋值 const

//可以用以下测试是否在客户端： console.log(12, document.cookie) console.log(33, window) 注意： setup是在服务端，其中的函数却基本都在客户端渲染！ //组件中客户端渲染 <ClientOnly> component 只在客户端呈现它的slot。若只在客户端导入组件，请在客户端插件中注册该组件。 <ClientOnly

参考 获取数据推荐useFetch、fetch这两个函数就可以。 //express res.status(200).send({ bot: "hello world" }) //前端 const url = " const fetchConfig = { method: 'POST', headers: { 'Content-Type': 'application/json'

脱离上下文的API 使用 createDiscreteApi 来创建一系列消息提示，它比较自由，推荐。 import { createDiscreteApi } from "naive-ui" // import { useMessage } from "naive-ui" useMessage要有专门设置，暂时不用 let { message } =

defineExpose用法 defineExpose来导出自身的值或函数 //Roles.vue <script setup> let sonmsg = '这是子数据' const open = () => { console.log("hello")} //把数据导出 defineExpose({ sonmsg, open }) </script>

defineProps来接受父组件传来的值 //index.vue <Menu :active = "active"></Menu> <NuxtPage :collection="defaultCollection" /> //Menu.vue 接受参数 defineProps({ active:{ type:Boolean,

components -> NaveBar.vue, <NaveBar /> 可直接导入无需引入 // 嵌套组件 components -> Ui -> Menu.vue <UiMenu> test </UiMenu> // 或者这样写： <ui-menu> test </ui-menu>

参考 //页面自动加载，会自动执行。 //在前端推荐使用，不推荐 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 ->