vue.js 相关问题

VS Code with Vue 向我展示：属性 '' 在类型 '{}'.ts(2339) 上不存在

在 Visual Studio Code 中，我有以下代码： const parseCSV = () => { // 为简洁起见省略代码 } } < 在 Visual Studio Code 中，我有以下代码： <script lang="ts" setup> const parseCSV = () => { // Code omitted for brevity } } </script> <template> <button @click="parseCSV">Parse</button> </template> IDE 在 parseCSV 下显示一条波浪线。显示的消息是： 类型“{}”上不存在属性“parseCSV”。ts(2339) 原因是什么？ 重新启动扩展“Vue - 官方”帮助我解决了这个问题。 我是这样做的： 打开扩展视图：您可以通过单击侧边栏上的方形图标或按 Ctrl+Shift+X 打开扩展视图。 查找 Vue 官方扩展：在“扩展”视图的搜索栏中输入“Vue 官方”。 禁用和重新启用：单击“禁用”可暂时关闭扩展程序。然后，单击启用以重新启动它。

VueJs3 pinia 商店未通过 axios 发布来纠正环境文件中的 api url

我有一个在本地工作的 .env 文件，其中包含以下设置：（相同主机，不同端口） VUE_APP_API_URL=http://localhost:5038 VUE_APP_UI_URL=http://localhost:8080 关于托管服务：（我是...

VueJs OnMount 道具生成“预期对象，未定义”警告

我有以下组件： 从 'vue' 导入 { ref, onMounted } 从 '@/</desc> 导入网格 <question vote="0"> <p>我有以下组件：</p> <pre><code>&lt;template&gt; &lt;Grid :items=&#34;items&#34; /&gt; &lt;/template&gt; &lt;script setup&gt; import { ref, onMounted } from &#39;vue&#39; import Grid from &#39;@/components/Grid.vue&#39; import { getData } from &#39;@/services/getData&#39; const items = ref() onMounted(async () =&gt; { items.value = await getData() }) &lt;/script&gt; </code></pre> <p><pre><code>Grid</code></pre> 组件实例需要填充 <pre><code>items</code></pre> 才能显示数据，但我需要运行 <pre><code>getData()</code></pre> 才能准备好数据。当我运行此代码时，我收到 <pre><code>type check failed for prop &#34;items&#34;. Expected Object, got Undefined</code></pre> 警告。</p> <p>发生这种情况是因为当文件首次启动时，<pre><code>items</code></pre>在<pre><code>getData()</code></pre>完成之前没有任何内容。如何在警告出现之前运行 <pre><code>getData()</code></pre>？</p> </question> <answer tick="false" vote="0"> <p>在加载数据之前，您的 <pre><code>items.value</code></pre> 是 <pre><code>undefined</code></pre>，因此导致错误。 初始化为</p> <pre><code>const items = ref(&lt;object&gt;) </code></pre> <p>其中 <pre><code>&lt;object&gt;</code></pre> 是最初输入网格的适当格式（对象（具有特定格式或空）或数组）。</p> </answer> </body></html>

Electron 和 vuejs 的桌面应用程序

我有一个 BeginTestView.vue 页面，其中有一个开始测试按钮。单击此按钮将启动一个 exe 文件，其中包含 C# 中的 Nunit 测试。我想在 Vue com 中使用 child_process execFile 运行 exe...

Vue3 无法导入 `@cornerstone/tools` ，错误为 `ICRPolySeg.wasm`

在Vue 3中，我无法导入@cornerstone/tools 从“@cornerstonejs/tools”导入*作为cornerstoneTools； window.cornerstoneTools =cornerstoneTools; 上面会遇到bug： ./

Nuxt3 - NuxtLink 锚点在单击或页面刷新时不滚动

我只是想让页面滚动到 Nuxt3 中的锚点，但我无能为力。它不会在点击时滚动，也不会在使用网址中的锚点刷新页面时滚动。 我只是想让页面滚动到 Nuxt3 中的锚点，但我无能为力。它不会在点击时滚动，也不会在使用网址中的锚点刷新页面时滚动。 <nuxt-link :to="{path: '/', hash: '#projects'}">Let's go</nuxt-link> 尝试了一堆其他SO答案，将自定义scrollBehaviour代码添加到nuxtConfig不起作用，并且尝试在Nuxt3中安装vue-scrollTo在使用vue-scrollTo模块运行应用程序时给了我这个错误 错误无法重新启动 nuxt：序列化未定义 任何帮助将不胜感激！ 完整代码 <script setup> import '@/assets/css/main.css'; const { data } = await useAsyncData('home', () => queryContent('/').find()) const projects = data </script> <template> <div> <div class="flex flex-col h-screen"> <div class="lg:p-20 p-10 text-white bg-orange-500"> <p class="font-playfair lg:text-7xl text-4xl mb-5">Kia Ora, my name is <span class="font-medium italic">George Bates</span></p> <p class="font-lato lg:text-3xl text-xl mb-5">Content creator and web developer in Auckland, New Zealand</p> </div> <div class="lg:p-20 p-10 text-white flex flex-grow" style="background-image: url('images/header.jpg'); background-position: center; background-size: cover;"> <nuxt-link :to="{path: '/', hash: '#projects'}">Let's go</nuxt-link> </div> </div> <main class="lg:p-20 p-10" id="projects"> <p class="text-3xl font-playfair mb-5 font-semibold pb-2 text-orange-500">Some of my work</p> <Projects :projects="projects" /> </main> </div> </template> 您说您已经尝试添加自定义scrollBehavior，但您是如何做到的？ 我对 Vue 和 Nuxt 非常陌生，但是感谢 这个 Github 答案，你可以自定义滚动行为，这对我有用： 文件app/route.options.ts： import type { RouterConfig } from '@nuxt/schema'; // https://router.vuejs.org/api/#routeroptions export default <RouterConfig>{ scrollBehavior(to, from, savedPosition) { return { el: to.hash, behavior: 'smooth', }; }, }; （这里我放了一个平滑的行为，但默认似乎是auto） 并使用如下代码示例： ... <NuxtLink :to="{path: '/', hash: '#anchor'}">Let's go!</NuxtLink> ... 对我有用的更简单。只需将以下内容添加到 nuxt.config.ts 文件中： router: { options: { scrollBehaviorType: "smooth", }, }, 这就是您所需要的。 您可以在“哈希链接的滚动行为”标题下阅读官方 Nuxt3 文档的更多内容。 希望有帮助！

如何在 HTML 上显示 MediaType 图像响应

我正在使用 MediaType.IMAGE_JPEG 从本地文件返回图像源。如果我通过 Postman 拨打电话，我可以看到该图像，但我无法成功在 HTML 上显示它。 @GetMapping(值...

如何解决“无法解析'@/...'中的导入””vitest的问题？

这是我得到的错误。我在“vite.config.ts”文件中定义的文件路径有问题。你能帮助我吗？ 错误日志 错误信息： 失败测试/utils/ConvertFromDomainToCount...

如何获取Vue中输入的修改值？

我有一个传递给组件的日期对象，当单击新日期时，列表会发生变化，因此我认为我需要使用计算属性来设置日期。我尝试使用数据，但后来 va...

路由器推送后滚动受阻

在 Vuejs 项目上工作，我尝试使用经典的 this.$router.push(); 更改 PWA 的页面。它在其他地方都可以完美工作，但是当从组件中包含的模态中执行此操作时......

Turf.js - 导入 Vue/Vite 项目时未找到类型声明

我使用Turf.js 的bbox 功能。无论我如何尝试，似乎都找不到 TS 类型定义。 我尝试了以下方法： 包.json： “依赖项”：{ ... “@草皮/草皮”...

如何在Vue3组件中等待Pinia存储数据初始化后再分配变量？

我正在使用 Pinia 构建一个 Vue.js 应用程序进行状态管理。在我的组件中，我需要根据从 Pinia 商店检索的数据分配变量。但是，我遇到了一个问题...

如果我想在 Vue.js 中创建前端，我应该使用 Django 还是 Django Rest Framework？

如果我想使用 Vue.js 作为前端创建一个 Web 应用程序，我应该使用什么，Django 还是 Django Rest Framework？

如何将 vite-plugin-rewrite-all 与 Quasar (Vue 3) 一起使用？ （或以另一种方式启用路径中的句点）

在 vueRouterMode: 'history' 模式下使用 quasar+vite 且路径与 thing/:id 匹配（其中 id 包含句点/点）时，会返回 404。这在几个不同的地方都有记录： https://github...

Storybook 和 sass 文件导入不起作用

所以我有一个带有 vue 3 + Storybook 项目的小型 vue cli。 当我开始收到有关样式的错误时，我开始为我的组件添加故事。我去了 Storybook 官方文档并

滑块组件循环内的 Vue 插槽

我在弄清楚如何使用 SliderA 组件的插槽时遇到了一些麻烦。 SliderA 组件如下所示，其中幻灯片是数组道具。 我在弄清楚如何使用 SliderA 组件的插槽时遇到了一些麻烦。 SliderA 组件如下所示，其中 slides 是一个数组道具。 <template> <div class="slider-container" ref="container"> <div class="viewport" ref="viewport"> <div class="slider" ref="slider"> <div v-for="(slide, index) in slides" :key="index" class="slide"> <slot :name="`example-${slide._id}`"></slot> </div> </div> </div> </div> </template> 在页面本身上我正在执行以下操作： <SliderA :slides="data.homePage.featuredGenres"> <template v-for="genre in data.homePage.featuredGenres" v-slot:[`example-${genre._id}`] :key="genre._id"> <div class="genre"> ... </div> </template> </SliderA> 这似乎有效，但我有一些担忧。 如果我将 :key 放在模板循环内的 <div class="genre"></div> 元素上，它就会中断。该错误表明密钥必须放置在模板标签上。令人困惑。 我将数据（对象数组）作为道具传递给组件:slides="data.homePage.featuredGenres"，以便循环遍历组件内的插槽，这感觉没有必要，但无法找到其他方法来做到这一点。 您需要范围内的插槽： VUE SFC 游乐场 <script setup> import SliderA from './SliderA.vue'; const data = { homePage:{ featuredGenres: [{name: 'Trash metal'}, {name: "Drum'n'bass"}] } }; </script> <template> <SliderA :slides="data.homePage.featuredGenres"> <template #="{slide}"> <div class="genre"> {{ slide.name }} </div> </template> </SliderA> </template> SliderA.vue <script setup> defineProps({ slides: Array }) </script> <template> <div class="slider-container" ref="container"> <div class="viewport" ref="viewport"> <div class="slider" ref="slider"> <div v-for="(slide, index) in slides" :key="index" class="slide"> <slot :="{slide}"></slot> </div> </div> </div> </div> </template>

Nuxt.js 默认布局未应用

我是使用 Nuxt.js 的新手，并且遇到一个问题：当我创建项目时，布局文件夹没有按照文档自动生成。我手动添加了它，但是 default.vue 没有被 ap...

vue中如何在onMount()之前触发watchEffect()

我的样品： 从“vue”导入 { onMounted, ref, watchEffect }; const htmlRef = ref("ref"); const dataRef = ref({}); onMounted(() => ...</desc> <question vote="0"> <p>我的样品：</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import { onMounted, ref, watchEffect } from &#34;vue&#34;; const htmlRef = ref(&#34;ref&#34;); const dataRef = ref({}); onMounted(() =&gt; { console.log(&#34;mount&#34;); // Init with htmlRef }); watchEffect(() =&gt; { console.log(&#34;effect&#34;); // Run after dataRef change }); &lt;/script&gt; &lt;template&gt; &lt;div ref=&#34;ref&#34;&gt;&lt;/div&gt; &lt;/template&gt; </code></pre> <p>我必须将外部的纯 JS 图表与 Vue 集成。</p> <ul> <li>在初始化步骤中，库需要访问 DOM，因此它必须位于 <pre><code>onMounted()</code></pre> 中。这不包含初始渲染。</li> <li>每当<pre><code>dataRef</code></pre>发生变化时，图表库需要接收整个<pre><code>dataRef</code></pre>并重新渲染。由于 <pre><code>watchEffect()</code></pre> 急切地运行，初始渲染自然会发生在这里。</li> </ul> <p>唯一的问题是： init 必须在任何渲染之前调用。 Vue 在 <pre><code>watchEffect()</code></pre> 之前执行 <pre><code>onMounted()</code></pre>，所以我的代码根本不起作用。现在我应该如何构建我的代码？</p> <p>我目前的解决方案：</p> <ul> <li>复制渲染代码。初始渲染发生在 <pre><code>onMounted()</code></pre> 和 </li> <li>添加标志 <pre><code>initialRender</code></pre> 以跳过 <pre><code>watchEffect()</code></pre></li> 中的初始渲染 </ul> <p>这是惯用的 Vue 吗？我来自 React，在这里标记初始渲染被认为是不好的做法。</p> </question> <answer tick="false" vote="0"> <p><pre><code>watchEffect</code></pre> 立即触发，而不是在 <pre><code>onMounted</code></pre> 之前触发，这是预期的行为。</p> <p>使用 <pre><code>watch</code></pre> 而不使用 <pre><code>immediate</code></pre> 标志：</p> <pre><code>watch(dataRef, data =&gt; ...) </code></pre> <p>或者不要使用没有任何用途的空对象作为初始状态，以与初始化值明确区分：</p> <pre><code>const dataRef = ref(null) ... watchEffect(() =&gt; { if (!dataRef.value) return ... </code></pre> </answer> </body></html>

markedjs 缺少代码块和语法高亮

我正在使用merkedjs、heighlight.js 和marked-heighlight 作为vue markdown 编辑器（只是一些学习composition-api 的项目）。 Markdown 由 MarkedJS 解析，代码位于 内 我正在使用 merkedjs、heighlight.js 和 Marked-heighlight 作为 vue markdown 编辑器（只是一些学习合成 API 的项目）。 markdown由markedjs解析，代码位于块内，但无法正确显示。另外，语法突出显示不起作用。 无法真正找到答案，大多数帖子都已使用突出显示选项（已删除）弃用，或者对于教程，代码块只是正确显示。有人可以帮忙吗？ 界面截图 父组件 <template> <div class="new-post__view" ref="root"> <PostWriter :post="newPost" /> </div> </template> <script setup lang="ts"> import { Ref, ref } from 'vue'; import { DateTime } from 'luxon'; import PostWriter from '@/components/PostWriter.vue'; import { TimelinePost } from '@/models/timelinePost'; const root: Ref<HTMLElement | null> = ref(null); const newPost: TimelinePost = { id: '', title: '', created: DateTime.now(), markdown: '## test \n ```\nfunction () => { console.log("test") }\n```\n- [ ] test' } </script> <style scoped lang="scss"> .new-post__view { @include view; display: flex; align-items: start; justify-content: center; } </style> 组件 <template> <div class="post-writer" ref="root"> <h3>{{ $t('links.new-post') }}</h3> <div class="post-writer__title"> <label for="post-writer-title">{{ $t('views.post-writer.title') }}</label> <input type="text" id="post-writer-title" v-model="title" /> </div> <div class="post-writer__content"> <div class="post-writer__editor"> <label for="post-writer-editor">{{ $t('views.post-writer.editor') }}</label> <div id="post-writer-editor" ref="contentEditor" contenteditable @input="handleInput()" /> </div> <div class="post-writer__preview"> <label for="post-writer-preview">{{ $t('views.post-writer.preview') }}</label> <div id="post-writer-preview" v-html="parsedContent"></div> </div> </div> </div> </template> <script setup lang="ts"> import { Ref, ref, onMounted, watch } from 'vue'; import { TimelinePost } from '@/models/timelinePost'; import { Marked } from 'marked'; import { markedHighlight } from 'marked-highlight'; import hljs from 'highlight.js'; const root: Ref<HTMLElement | null> = ref(null); const contentEditor: Ref<HTMLElement | null> = ref(null); // eslint-disable-next-line -- compiler macro const props = defineProps<{ post: TimelinePost; }>(); const title: Ref<string> = ref(props.post.title); const content: Ref<string> = ref(props.post.markdown); const parsedContent: Ref<string> = ref(''); const marked = new Marked( { gfm: true, breaks: true }, markedHighlight({ langPrefix: 'hljs language-', highlight(code: string, lang: string) { const language: string = hljs.getLanguage(lang) ? lang : 'plaintext'; return hljs.highlight(code, { language }).value; } }) ); watch(content, async (newContent) => { parsedContent.value = await marked.parse(newContent); }, { immediate: true }); async function handleInput(): Promise<void> { if (!contentEditor.value) { throw Error('ContentEditor/Preview DOM note(s) was not found'); } content.value = contentEditor.value.innerText; } onMounted(() => { if (!contentEditor.value) { throw Error('ContentEditor/Preview DOM note(s) was not found'); } contentEditor.value.innerText = content.value; }); </script> <style scoped lang="scss"> @import 'highlight.js/styles/atom-one-dark.css'; .post-writer { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 1rem; gap: 2rem; width: 100%; h3 { margin: 0; } .post-writer__title { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.5rem; width: 100%; #post-writer-title { background-color: $color-white; border: 1px solid $color-gray; border-radius: 5px; height: 1.25rem; padding: 0.2rem 0.5rem; width: calc(100% - 1rem); outline: none; } } .post-writer__content { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; .post-writer__editor { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 50%; :focus { outline: none; } } .post-writer__preview { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 50%; } label { margin-bottom: 0.5rem; cursor: pointer; } #post-writer-editor, #post-writer-preview { @include custom-scrollbar; background-color: $color-white; border: 1px solid $color-gray; border-radius: 5px; width: calc(100% - 2rem); min-height: 15rem; height: calc(100% - 2rem); padding: 1rem; text-align: start; } #post-writer-editor { line-height: 1.5; } } @media (max-width: 800px) { .post-writer__content { display: flex; flex-direction: column; align-items: center; justify-content: start; .post-writer__editor { width: 100%; } .post-writer__preview { width: 100%; } } } } </style> package.json { "name": "web-app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test": "vitest watch --environment happy-dom", "test-cov": "vitest watch --environment happy-dom --coverage", "server": "ts-node src/server/server.ts" }, "dependencies": { "highlight.js": "^11.9.0", "lodash": "^4.17.21", "luxon": "^3.4.4", "marked": "^12.0.2", "marked-highlight": "^2.1.1", "pinia": "^2.1.7", "uuid": "^9.0.1", "vue": "^3.2.13", "vue-i18n": "^9.10.2", "vue-router": "^4.3.0" }, "devDependencies": { "@testing-library/vue": "^8.0.3", "@types/cors": "^2.8.17", "@types/express": "^4.17.21", "@types/lodash": "^4.17.0", "@types/luxon": "^3.4.2", "@types/marked": "^6.0.0", "@types/uuid": "^9.0.8", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "@vitejs/plugin-vue": "^5.0.4", "@vitest/coverage-v8": "^1.4.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-typescript": "~5.0.0", "@vue/cli-service": "~5.0.0", "@vue/eslint-config-typescript": "^9.1.0", "@vue/test-utils": "^2.4.5", "cors": "^2.8.5", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-vue": "^8.0.3", "express": "^4.19.2", "happy-dom": "^14.3.1", "msw": "^2.2.10", "sass": "^1.71.1", "sass-loader": "^10.5.2", "ts-node": "^10.9.2", "typescript": "^5.1.6", "vite": "^5.2.3", "vitest": "^1.4.0", "whatwg-fetch": "^3.6.20" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended" ], "parserOptions": { "ecmaVersion": 2020 }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] } 一直在使用markedjs文档 和标记高度文档 这适用于突出显示： const marked = new Marked( { gfm: true, breaks: true }, markedHighlight({ langPrefix: 'hljs language-', highlight(code: string) { return hljs.highlightAuto(code).value; } }) ); 对于代码块，标记的演示（https://marked.js.org/demo/）不再显示代码块，似乎是新的默认样式。

如何使用 vue-chartjs 5.2 从 vue3 中的父级更新图表

我是 vue 新手，说实话，我不明白如何从其 paren 更新图表。使用 vue-dev-tools，我看到数据已更新，但没有触发图形更新。 我发现了很多...