nuxt.js 相关问题

正如标题所述，我使用 TypeScript 和组合 API 语法在 Nuxt 3 项目上进行编程。该项目有一个标准化的 tsconfig.json： { “延伸”：...</desc> <question vote="3"> <p>正如标题所述，我使用 TypeScript 和 <pre><code><script setup></code></pre> 组合 API 语法在 Nuxt 3 项目上进行编程。该项目有标准化<pre><code>tsconfig.json</code></pre>:</p> <pre><code>{ "extends": "./.nuxt/tsconfig.json", "compilerOptions": { "target": "esnext", "module": "esnext", "noImplicitAny": true, "moduleResolution": "node", "strict": true, "esModuleInterop": true, "types": ["@types/node"] }, "include": ["src/**/*"], "exclude": ["node_modules"] } </code></pre> <p>但是 WebStorm 在其 2023.1.2 版本中仍然会在自动导入的组合 API 函数中抛出错误，并显示错误消息：</p> <blockquote> <p>tsconfig.json中不包含对应文件</p> </blockquote> <p>这里出了什么问题，我能做什么来解决它？</p> <p>我添加了标准化的 ts.json 配置并按照典型方式设置项目，这里不应该有错误。</p> </question> <answer tick="false" vote="1"> <p>作为一种解决方法，使用 Typescript v4 而不是 v5 对我有用。看来是WebStorm的一个bug。</p> </answer> <answer tick="false" vote="0"> <h1>问题</h1> <p>defineProps 也有同样的问题，并且 <em>相应的文件未包含在 tsconfig.json</em> 消息中。一个基于 Vite.js 的项目，具有标准 TypeScript 配置。该问题并没有干扰构建过程，只是一个烦人的警告以及 IDE 中缺乏自动完成功能。 Intellij Idea 2022.2</p> <h2>解决方案</h2> <p>可以通过在 tsconfig.json 中添加对 <pre><code>defineProps</code></pre> 函数定义的引用来解决此问题。对于 Vue 3.3，示例如下</p> <pre><code>{ //... tsconfig.json "files": ["node_modules/@vue/runtime-core/dist/runtime-core.d.ts"] } </code></pre> </answer> <answer tick="false" vote="0"> <h2>尝试从 Nuxt 2 迁移</h2> <p>我没有意识到我正在使用旧的<pre><code>tsconfig.json</code></pre>。删除完整的 <pre><code>exclude</code></pre> 配置解决了这个问题。</p> <pre><code> "exclude": [ "node_modules", ".nuxt", "dist" ] </code></pre> <p><strong>再次一一添加排除的路径</strong></p> <p>使用Webstorm 2023.3</p> </answer> </body></html>

typescript nuxt.js webstorm

回答 0 投票 0

Sanity.io 和 Nuxt.js - 找不到模块“@nuxtjs/sanity”

我创建了一个 nuxt.js 应用程序来连接到 sanity.io CMS。只需按照文档指示的步骤操作即可：纱线创建 nuxt-app my-app 选择了一个具有SSR渲染模式和静态s的js应用程序...

nuxt.js sanity

回答 1 投票 0

从头开始的 Vue SSR - 在客户端加载服务器 webpack 包时出现问题

我正在尝试构建文档生成器服务，由于灵活性等原因，我的文档模板是用 Vue 编写的。上下文（请随意跳到问题部分）客户写下他的

vue.js webpack nuxt.js bundle server-side-rendering

回答 1 投票 0

如何在Nuxt 3中使用useQuery()作为API路由参数？

我正在遵循一个指南，其中 api 路由的构建如下： 1 创建server/api/route.js文件：导出默认的defineEventHandler((事件) => { 返回 { 消息：`你好 API 路由` ...

javascript vue.js nuxt.js nuxtjs3

回答 3 投票 0

自定义确认组件未在 vue.js 中的 v-menu 内打开

每当单击标题上的任何按钮时，我都会尝试显示确认组件。每当我单击除使用 v 菜单的下拉列表之外的其他元素时，它都会打开。应用程序.vue 每当单击标题上的任何按钮时，我都会尝试显示确认组件。每当我单击除使用 v 菜单的下拉列表之外的其他元素时，它都会打开。应用程序.vue <template> {{isConfirmDialogVisible}} <div class="header"> <div class="left-menus"> <div v-for="(item, index) in items" :key="index" class="menu" style="background-color: red; gap: 10px; padding: 10px" @click="opendialog()" > {{ item.title }} </div> </div> <v-menu open-on-hover transition="slide-y-transition"> <template #activator="{ props }"> <div style="cursor: pointer"> <v-icon v-bind="props">mdi-menu-down</v-icon> </div> </template> <v-list> <v-list-item v-for="(item, index) in userOptions" :key="index" class="dropdown" @click="opendialog()" > <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item> </v-list> </v-menu> <Confirmation v-model="isConfirmDialogVisible" v-if="isConfirmDialogVisible" action-button="submit" action-button-left="cancle" action-button-right="confirm" > <div style="font-size: 20px">Are you sure？</div> </Confirmation> </div> </template> <script> import { ref } from 'vue' import Confirmation from './Confirmation.vue' const isConfirmDialogVisible = ref(false) const userOptions = ref([{ title: 'Logout' }, { title: 'Setting' }]) const opendialog = () => { isConfirmDialogVisible.value = true } export default { components: { Confirmation, }, data: () => ({ items: [ { title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me 2' }, ], opendialog, isConfirmDialogVisible, userOptions, }), } </script> <style> .header .left-menus { display: flex; align-items: center; gap: 16px; } </style> 确认.vue <template> <v-dialog v-model="dialogVisible" persistent activator="parent" width="auto"> <div class="dialog_container"> <v-card> <div class="card-components"> <div class="warning_image"></div> <v-card-text> <slot></slot> </v-card-text> <v-card-actions> <v-btn class="back" @click="closeDialog" >{{ actionButtonLeft }}</v-btn > <v-btn @click="confirmSelection" class="confirm-submit"> {{ actionButtonRight}} </v-btn> </v-card-actions> </div> </v-card> </div> </v-dialog> </template> <script> import { ref } from 'vue' export default { props: { modelValue: Boolean, actionButton: { type: String, required: true, }, actionButtonRight: { type: String, required: true, }, actionButtonLeft: { type: String, required: false, default: 'cancel', }, }, emits: ['update:modelValue', 'confirmAction'], setup(props, { emit }) { const dialogVisible = ref(false) const closeDialog = () => { dialogVisible.value = false emit('update:modelValue', false) } const confirmSelection = () => { closeDialog() emit('confirmAction') } const returnBack = () => { closeDialog() } const handleOutsideClick = event => { console.log(event) } return { dialogVisible, closeDialog, returnBack, confirmSelection, handleOutsideClick, } }, } </script> <style scoped> .card-components { display: flex; flex-direction: column; gap: 24px; } .dialog_container { height: 225px; width: 648px; } .v-card { padding: 16px 24px 24px 24px; } .v-card-text { padding: 0; } .warning_image { display: flex; width: 100%; justify-content: center; } .v-card-actions { min-height: 0; padding: 0; display: flex; justify-content: flex-end; } .v-card-actions .v-btn { border: 1px solid #9ca3af; color: #9ca3af; width: 140px; justify-content: center; align-items: center; border-radius: 4px; } .v-card-actions .confirm-submit { color: white; border: 1px solid #41a1e0; background: #41a1e0; } </style> 每当单击标题上的任何按钮时，我都会尝试显示确认组件。每当我单击除使用 v 菜单的下拉列表之外的其他元素时，它都会打开。在Confirmation.vue中，VDialog依赖父组件变得可见： <template> <v-dialog v-model="dialogVisible" activator="parent"> ... </template> <script setup> const dialogVisible = ref(false) ... </script> 因此，当确认组件变得可见时，VDialog 将显示对话框并更新dialogVisible。由于某种原因，当 VMenu 可见时这不起作用。相反，使用组件的 modelValue 来触发对话框，无论如何这更有意义。有几种方法可以做到这一点，一种是在观察者中设置 dialogVisible： setup(props, { emit }) { const dialogVisible = ref(false) watchEffect(() => dialogVisible.value = props.modelValue) 这是在游乐场

javascript vue.js frontend nuxt.js vuetify.js

回答 1 投票 0

在 Vue.js SFC 文件中声明或使用 TS 类型/接口时出现智能感知错误

我正在为我的 Nuxt 3 项目开发一个组件。我试图声明一个接口来为组件道具提供强类型，例如：接口道具 { 浮点数：数字；...</desc> <question vote="0"> <p>我正在为我的 Nuxt 3 项目开发一个组件。我正在尝试声明一个接口来为组件道具提供强类型，例如：</p> <pre><code><script setup> interface Props { float: number; } const props = defineProps<Props>(); </script> </code></pre> <p>但是，当我尝试这样做时，VS Code 的智能感知显示错误：</p> <pre><code>'interface' declarations can only be used in TypeScript files. ts(8006) </code></pre> <p>我还注意到，当我尝试使用任何类型注释时，它会显示另一个错误（例如：<pre><code>let x: string</code></pre>）：</p> <pre><code>Type annotations can only be used in TypeScript files. ts(8010) </code></pre> <p>我<em>可以</em>使用道具的运行时声明语法 - 例如：</p> <pre><code>const props = defineProps({ float: { type: Number, required: true }, }); </code></pre> <p>但我宁愿使用 <strong>TypeScript 语法</strong>，因为我希望在项目范围内启用类型安全和符号。</p> <h3>我尝试过的事情</h3> <p>我按照标准步骤在 VS Code 中为 Vue 文件启用 TS 语法：</p> <ul> <li>我安装了<a href="https://marketplace.visualstudio.com/items?itemName=Vue.volar" rel="nofollow noreferrer">Volar</a>；</li> <li>我还禁用了工作区的内置 TypeScript VS Code 扩展 <a href="https://vuejs.org/guide/typescript/overview#volar-takeover-mode" rel="nofollow noreferrer">以便启用接管模式</a>。状态栏中出现 <pre><code>(takeover)</code></pre> 标签，表示它正在工作。</li> </ul> <p>但这不起作用。我尝试重新启动 Volar Vue 服务器，甚至完全重新启动 VS Code，但错误仍然存在。什么可能导致出现错误？</p> </question> <answer tick="false" vote="0"> <p>啊，菜鸟错误 - 我忘记向 <pre><code>lang="ts"</code></pre> 标签提供 <pre><code>script</code></pre> 属性：</p> <pre><code><script setup lang="ts"> interface Props { float: number; } const props = defineProps<Props>(); </script> </code></pre> <p>添加<pre><code>lang="ts"</code></pre>后，问题就消失了。</p> <p>最令人沮丧的是，VS Code 没有任何地方暗示它的缺失可能是错误的原因，而且看起来 Volar 根本没有接管。我在再次查看<a href="https://vuejs.org/guide/typescript/overview#usage-in-single-file-components" rel="nofollow noreferrer">docs</a>后才注意到它。</p> </answer> </body></html>

typescript vue.js nuxt.js volar vuejs3-composition-api

回答 0 投票 0

Nuxt 密钥和 reCaptcha

我正在使用 nuxt.js 使用通用模式来预渲染 html 页面，并从 Google reCaptcha 获得我的密钥。 nuxt.js 应用程序中的哪个位置是存储密钥的最佳位置？做...

vue.js nuxt.js

回答 3 投票 0

在 Nuxt 的计算属性中使用 useAsyncData 是否正确？

我正在制作一个可组合项，它返回有关用户的数据。我想在对远程服务器的请求中获取用户状态（已验证或访客）。我将访问令牌存储在 cookie 中并发出此请求...

vue.js vuejs3 nuxt.js nuxt3

回答 1 投票 0

使用 nuxt-link 导航到不同页面上的锚点/哈希不起作用

我想从另一个页面导航到另一个页面的特定部分。所以我在 nuxt.config.js 文件的路由器对象中添加了scrollBehavior函数，如下所示：路由器：{ 滚动行为（至）{ ...