Login
Discover
Waves
Communities
Login
Signup
lemooljiang
@lemooljiang
75
Designer , Poet , Technology enthusiasts
Followers
2368
Following
95
Follow
Resource Credits
Available
Used
Location
Guangzhou
Created
2016-07-16 04:39
RSS Feed
Subscribe
Comments
Blog
Posts
Comments
Communities
Wallet
lemooljiang
starnote
2026-02-10 01:38
RE: Nuxt开发指南
用transform 函数来对结果拦截，并做出一些处理逻辑。 const { data: mountains } = await useFetch('/api/mountains', { transform: (mountains) => { return mountains.map(mountain => ({ title: mountain.title, description:
$ 0.000
0
lemooljiang
starnote
2026-02-10 01:35
RE: Nuxt开发指南
参考 获取数据推荐useFetch、fetch这两个函数就可以。 //express res.status(200).send({ bot: "hello world" }) //前端 const url = " const fetchConfig = { method: 'POST', headers: { 'Content-Type': 'application/json'
$ 0.000
0
4
lemooljiang
starnote
2026-02-10 01:34
RE: Nuxt开发指南
脱离上下文的API 使用 createDiscreteApi 来创建一系列消息提示，它比较自由，推荐。 import { createDiscreteApi } from "naive-ui" // import { useMessage } from "naive-ui" useMessage要有专门设置，暂时不用 let { message } =
lemooljiang
starnote
2026-02-09 08:12
RE: Nuxt开发指南
defineExpose用法 defineExpose来导出自身的值或函数 //Roles.vue <script setup> let sonmsg = '这是子数据' const open = () => { console.log("hello")} //把数据导出 defineExpose({ sonmsg, open }) </script>
lemooljiang
starnote
2026-02-09 08:11
RE: Nuxt开发指南
defineProps来接受父组件传来的值 //index.vue <Menu :active = "active"></Menu> <NuxtPage :collection="defaultCollection" /> //Menu.vue 接受参数 defineProps({ active:{ type:Boolean,
lemooljiang
starnote
2026-02-09 08:11
RE: Nuxt开发指南
components -> NaveBar.vue, <NaveBar /> 可直接导入无需引入 // 嵌套组件 components -> Ui -> Menu.vue <UiMenu> test </UiMenu> // 或者这样写： <ui-menu> test </ui-menu>
lemooljiang
starnote
2026-02-09 08:09
RE: Nuxt开发指南
参考 //页面自动加载，会自动执行。 //在前端推荐使用，不推荐 process.client onMounted(() => { console.log(699, "moundted") function x (){ console.log(722, "moundted") } x() }) onMounted(() => {
lemooljiang
starnote
2026-02-09 08:08
RE: Nuxt开发指南
手册 Nuxt 提供了一个强大的钩子系统，可以通过钩子扩展几乎每个方面。 由于 Nuxt 整合了 Vue、Nitro 前后端两个运行时，再加上它自身的创建过程，因此框架生命周期钩子分为三类： Nuxt 钩子； Vue App 钩子； Nitro App 钩子。 const nuxtApp = useNuxtApp() eg: nuxtApp.hook("page:start",(e)=>{
lemooljiang
starnote
2026-02-09 08:05
RE: Nuxt开发指南
<NuxtLink> 组件来处理您应用程序中的各种链接。 <NuxtLink to="/about">About page</NuxtLink> <NuxtLink :to="'/miaos/'+'@'+item.author+'/'+item.permlink"> <img width=98% mt-3
lemooljiang
starnote
2026-02-09 08:04
RE: Nuxt开发指南
// 将 'to' 作为字符串传递 await navigateTo('/search') // ... 或者作为路由对象 await navigateTo({ path: '/search' }) // 动态路由 await navigateTo({ path: '/post/'+permlink}) //post动态页面接受方法 const route = useRoute() cosnt permlink
lemooljiang
starnote
2026-02-09 08:04
RE: Nuxt开发指南
useRouter 返回路由器实例，必须在设置函数、插件或路由中间件中调用。 在Vue组件的模板中，你可以使用$router 来访问路由器。 const router = useRouter() //几个重要参数： url: router.name: 'user-userinfo' router.fullPath: '/user/userinfo' router.path: '/user/userinfo'
lemooljiang
starnote
2026-02-09 03:09
RE: Nuxt开发指南
useRoute 返回当前路由， 必须在setup函数、插件或路由中间件中调用。 在Vue组件的模板中，可以使用$route访问路由。 const route = useRoute() // == $route console.log(route.path) // '/about' //获取路径id $route.params.id //除了动态参数和查询参数， useRoute()
lemooljiang
starnote
2026-02-09 03:08
RE: Nuxt开发指南
如果您在文件名中使用方括号 [ ]，它将被转换为 动态路由 参数。您可以在文件名或目录中混合使用多个参数。 如果您希望参数是 可选的，必须使用双括号 [[]] 括起来，例如 ~/pages/[[slug]]/index.vue 或 ~/pages/[[slug]].vue 将匹配 / 和 /test。 目录结构 -| pages/ ---| index.vue ---| users-[group]/
lemooljiang
starnote
2026-02-09 03:07
RE: Nuxt开发指南
Nuxt会自动使用Vue Router在底层创建路由，页面的名字就是路由地址。 app -> pages 文件夹，在此文件夹内创建页面。 app/pages/about.vue -> localhost:3000/about 默认情况下`app/pages/index.vue`是根路径 / //二级路由: 页面文件在一个目录下 app/pages/user/info.vue ->
lemooljiang
starnote
2026-02-09 03:05
RE: Nuxt开发指南
NaiveUI的Grid栅格系统，可以布局响应式的样式。 cols number | ResponsiveDescription 24 一般是分成24列，每列用 span 表示占比 <n-grid x-gap="12" :cols="4"> <n-gi> <div class="light-green" />
lemooljiang
starnote
2026-02-09 03:04
RE: Nuxt开发指南
layouts -> default.vue, <slot/>可以将其它页面插入 eg: <template> <div class="body"> <NavBar/> <main class="containerX"> <slot/> </main> </div>
lemooljiang
starnote
2026-02-09 03:03
RE: Nuxt开发指南
1. plugins/目录 -> myPlugin.ts 2. myPlugin.ts export default defineNuxtPlugin(nuxtApp => { // Doing something with nuxtApp }) export default defineNuxtPlugin(() => { return { provide: { hello: (msg:
lemooljiang
starnote
2026-02-09 03:02
RE: Nuxt开发指南
middleware 目录，Nuxt提供了一个可定制的路由中间件框架，可以在整个应用程序中使用，非常适合在导航到特定路由之前提取想要运行的代码。 //middleware -> search.js export default defineNuxtRouteMiddleware((to,from)=>{ const { type,page } = to.params const { keyword
lemooljiang
starnote
2026-02-09 03:00
RE: Nuxt开发指南
在composables/目录中编写自己的自动导入可重用函数。但它只导入顶层函数，如有二级目录，则必须在config中配置！ export const newFun = (i) => { return i+5 } //composables/gets/foo.js imports: { dirs: ["composables/**"] },
lemooljiang
starnote
2026-02-09 02:59
RE: Nuxt开发指南
Nuxt使用 utils/ 目录在整个应用程序中使用auto-imports自动导入辅助函数和其他实用程序! export function test2() { console.log(12793, "test.js2") } //也可以自定义导出目录 //nuxt.config.ts imports: { dirs: ["apis"] }
← Latest
Older →
