Nuxt.js是一个用于创建Vue.js应用程序的框架，您可以选择Universal，Static Generated或Single Page应用程序（受Next.js启发）
Nuxt3 - 如何创建一个单页作品集网站，其中帖子在 div 弹出窗口中打开（无需重新加载页面），但每个项目都有唯一的 url？
我正在使用 nuxt3、tailwindcss 和 Wordpress REST API 制作一个作品集网站。 作品集网站的总体布局如下： ... 我正在使用 nuxt3、tailwindcss 和 Wordpress REST API 制作一个作品集网站。 作品集网站总体布局如下： <body> <div id="page-wrapper"> <section id="landing-image" class="w-screen h-screen">...</section> <section id="about">...</section> <section id="projects-grid">...</section> </div> </body> 目标： 我希望网站感觉只有一页，但支持从项目网格中单击项目来阅读有关该项目的更多信息。单击项目时，内容应该加载，而无需（可见）重新加载页面。请参阅此作品集网站作为项目网格的示例，其中包含我尝试实现的项目弹出窗口：https://www.tessarosejacksoncomposer.com/ 我尝试过的： 1.）我想到的一种方法是向包含被 tailwind 隐藏的帖子内容的页面添加一个 div，并且 nuxt 跟踪状态。当帖子需要查看或不查看并且加载正确的项目内容时，Nuxt 有条件地设置“隐藏”类。 app.vue <template> <div id="page-wrapper"> <section id="landing-image" class="w-screen h-screen">...</section> <section id="about">...</section> <section id="projects-grid">...</section> </div> <div id="project-content-wrapper" class="absolute h-screen w-screen" :class="{'hidden': postHidden }"> ... (dynamically load project content and unhide by nuxt state management) ... </div> </template> 这是一个很好且简单的实现，但我的主要问题是每个项目没有唯一的 url。当我想分享一个特定的项目时，我想发送一个立即打开该项目的网址。现在该网址始终保留在主页上。第二个问题是使用该网站时没有 url 历史记录，我认为这不直观。 2.）因此，我找到了第二种方法，使用嵌套的 nuxt 页面和 <NuxtPage /> 组件（参考：https://v2.nuxt.com/examples/routing/nested-pages/ ）。我的想法是将 <NuxtPage /> 标签放在项目内容 div 中，然后有一个根据 url 进行更改的嵌套页面，但不会重新加载整个页面（明显）。在 pages/ 目录中，我创建了一个 project/ 目录、project.vue 文件，并在 project/ 目录中添加了一个 [...slug].vue 文件，其中包含项目布局并呈现内容。这样我的项目就有了 url example.com/project/project-slug。 project.vue 文件只是获得漂亮 url 的传递，并且仅包含带有 <NuxtPage /> 的模板来嵌套项目子项。 app.vue <template> <div id="page-wrapper"> <section id="landing-image" class="w-screen h-screen">...</section> <section id="about">...</section> <section id="projects-grid">...</section> </div> <div id="project-content-wrapper" class="absolute h-screen w-screen" :class="{'hidden': postHidden }"> <NuxtPage /> </div> </template> 第二种方法解决了url问题，但是页面明显重新加载并破坏了单页效果。这是因为页面可以滚动，当使用 <NuxtLink> 转到项目时，站点会滚动到顶部。当我添加一个跨 UI 元素来关闭项目弹出窗口并返回主页时，这成为一个问题。单击十字时，页面位于顶部，迫使用户再次向下滚动回到项目网格。我想要这样的错觉：弹出窗口在网站上打开，当单击十字时，用户会从上次中断的地方继续。 问题： 有谁知道一种方法来实现这个项目网格弹出效果，每个项目都有唯一的网址，同时保持留在同一个页面上的感觉？ 你可以尝试这样的事情（注意：你应该有一个根元素）： <template> <main> <div v-if="project_list"> <div id="project-wrapper" v-for="item,index in project_list" :key="'project'+index" @click="handle(item)"> <section id="landing-image" class="w-screen h-screen">...</section> <section id="about">...</section> <section id="projects-grid">...</section> </div> </div> <div id="project-content-wrapper" class="absolute h-screen w-screen" :class="{'hidden': postHidden }"> ... (dynamically load project content and unhide by nuxt state management) ... </div> </main> </template> <script setup> import {ref,onMounted} from 'vue' const route = useRoute() const postHidden = ref(true) const postContent = ref(null) const { data: project_list} = await useFetch('/path/to/myapi')//return an array of projects const handle = (item)=>{ if(!window)return window.history.pushState(null,'',`?p=${item.slug}`) postHidden.value = false postContent.value = item } onMounted(()=>{ if(route.query.p){ const post = route.query.p const {data,error} = postHidden.value = false project_list.forEach(item=>{ if (item.slug == p) postContent.value = item }) } }) </script> 这是一个粗略的实现，例如不支持错误。这个想法是使用“window.history.pushState”通过查询字符串修改 url，并在页面加载时使用此查询字符串（如果存在）
我有一个服务器端渲染生产模式Vite应用程序。我的问题是：网页通常会重新加载，控制台会显示 [vite] 连接...我将此追溯到热门...
我有一个组件应该根据当前断点切换使用的布局。 从“vue”导入{计算}； 导入{断点Tailwin...</desc> <question vote="0"> <p>我有一个组件应该根据当前断点切换使用的布局。</p> <pre><code><script setup lang="ts"> import { computed } from "vue"; import { breakpointsTailwind } from "@vueuse/core"; const breakpoints = useBreakpoints(breakpointsTailwind); const layoutName = computed(() => breakpoints.smaller("md") ? "sidenav-mobile" : "sidenav-desktop", ); </script> <template> <div> {{ breakpoints.smaller("md") }} <!-- this is reactive --> <NuxtLayout :name="layoutName"> <!-- layoutName is not reactive --> <template #links> <slot name="links"></slot> </template> </NuxtLayout> </div> </template> </code></pre> <p>调整断点下方或上方窗口的大小时，我的调试输出<pre><code>{{ breakpoints.smaller("md") }}</code></pre>正确更改为 true 或 false，但除非重新加载，否则布局不会切换。</p> <p>我做错了什么？</p> </question> <answer tick="false" vote="0"> <p>它返回一个引用。在模板中，它们是展开的，因此它“按预期”工作。</p> <p>在您的 <pre><code>computed</code></pre> 中，您需要添加 <pre><code>.value</code></pre> 来读取当前值。</p> </answer> </body></html>
我正在尝试使用 Nuxt 3 测试模块联合，但我遇到了一些问题。 当前设置 我正在使用 docker 容器在本地进行测试。 远程图书馆 我正在尝试使用 webpack 模块之一
下面是我的组件的代码，我也在使用VueUse，如果点击是在slot元素之外，我想触发vueUse的“onClickOutside”函数。 但拿不到...
我想显示加载屏幕，直到我的网站完全加载完毕。 或像 page:finish 或 page:loading:end 这样的运行时钩子对我不起作用。两者都显示页面
一体化可下载 HTML 文件，包括来自 nuxt 应用程序的 Chart.js
我的要求是提供一个小型 Nuxt 应用程序，它生成一个简单的 HTML 文件，其中包括一些为我工作的公司的客户提供的服务的概述部分。具体用例...
常量日期 = ref(新日期(2024, 1, 19)) 我正在使用 Vue....
美好的一天，我创建了一个页面，该页面应该根据调用的位置更改标题，我有一个问题，我需要将标题作为页面道具传递，我尝试使用 $router.push 发送它({...
我正在使用名为 Unimport 的插件，该插件用于从第三方库或当前项目自动导入模块。它在 nuxt 中使用，可以在 nuxt.config.ts 中进行配置，如下所示： 导出默认
我有一个用 nuxt 3 编码的项目。我想做代码混淆，但我找不到合适的资源。我的项目中有 .ts 和 .vue 文件。你能帮助我吗？ 我无法尝试任何事情
第 0 行出现致命错误 检查失败：reservation_.SetPermissions（protect_start，protect_size，permission）。 #FailureMessage对象：0x78686cd993b0 1: 0xa889e1 \[节点\] 2: 0x1a37055 V8_Fatal(字符...
我需要用于金钱输入和电话号码输入的输入掩码。 我尝试了这个 vue 包，但无法将其安装到 nuxt3 https://github.com/autoNumeric/vue-autoNumeric/tree/master 我定义了 nuxt3 插件...
每当我尝试使用以下方法扩展另一个 Nuxt 3 项目时： 导出默认defineNuxtConfig({ // 这是在 `main-project` 中的 nuxt.config.ts 内 延伸：[ '../测试扩展' ] }) 我...
在nuxtjs3中如何使用useAsyncData和'pick'？
我正在尝试使用 useAsyncData 从 API 中获取一些数据并从中选择一些选项，但我失败了。欢迎有关 useAsyncData 中的选择选项的任何帮助。 工作示例...
我正在尝试使用 Nuxt3 $fetch 服务器端写入数据库。我正在使用 prisma 访问数据库。当我使用 $fetch 时，我希望端点将“成功”字符串返回给我的
Nuxt 3-navigateTo 在 useFetch 后不起作用
知道为什么这不起作用吗？ useFetch 后无法重定向。 const {slug} = useRoute().p...</desc> <question vote="0"> <p>知道为什么这不起作用吗？</p> <p>我无法在<pre><code>useFetch</code></pre>之后重定向。</p> <pre><code><template> <div></div> </template> <script setup lang="ts"> const {slug} = useRoute().params await useFetch(`http://localhost/${slug}`, { async onResponse({response: {_data: data}}) { // I'm using google to make sure it's external, but will come from api const url = new URL('https://google.com') await navigateTo(url.href, { external: true }) } }) </script> </code></pre> </question> <answer tick="false" vote="0"> <p><pre><code>navigateTo</code></pre> 不适用于 <pre><code>useFetch</code></pre> 中的回调函数，但仅适用于 <pre><code>setup</code></pre> 脚本的第一层</p> <pre><code><script setup lang="ts"> const route = useRoute(); const { slug } = route.params; const { data: post } = await useFetch(`http://localhost/${slug}`); const { data: url } = await useFetch(`https://google.com`); navigateTo(url.value.href, { external: true }); </script> </code></pre> <p>确保 <pre><code>useFetch()</code></pre> 将返回 <pre><code>Ref</code></pre> 实例，并且您不需要 <pre><code>navigateTo</code></pre> 异步。</p> </answer> </body></html>
无法创建新的nuxt项目。使用 npm init nuxt-app nuxt-hello-world 时出现问题
一切正常，直到第 30 行，然后我得到： 31 愚蠢的日志文件开始清理日志，删除1个文件 32 定时 arborist:ctor 在 0ms 内完成 33 愚蠢的日志文件 完成清理日志文件 34 http 获取...
所以我试图添加搜索功能，但 searchContent() 总是返回空数组。我不明白为什么这不起作用。我的 Markdown 文档位于 /content 中。 这是一些相关的
错误：未实现：FabricJs 中的 HTMLCanvasElement.prototype.getContext （未安装 canvas npm 包）
我在项目中使用fabric.js，当我构建项目时，出现此错误 Error: Not Implement: HTMLCanvasElement.prototype.getContext (without Installation the canvas npm package)。请帮助我...