Vue 3 - 如何使用 typescript 将组件包装在 Vue 中
我正在尝试包装 PrimeVue 组件(日历),稍微更改其样式,然后再次导出。 反应中类似以下内容: const WrappedCalendar: React.FC = (...
Vue 3,组合 API:“排除”TypeScript 实用程序类型导致道具验证错误
我正在使用 Vue 3 以及 Composition API 和 TypeScript,一切都是最新的稳定版本。 假设我有以下类型: 导出接口人{ 名称:字符串; } 导出类型统计...
大家好我正在将我的 vue3 项目从 js 迁移到 typescript,我遇到了这个问题: 这是我在 .vue 文件中的代码 const toto = (msg: string) => { </desc> <question vote="7"> <p>大家好,我正在将我的 vue3 项目从 js 迁移到 typescript,我遇到了这个问题:</p> <p><a href="https://i.stack.imgur.com/y5tG8.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3k1dEc4LnBuZw==" alt=""/></a></p> <p>这是我在 .vue 文件中的代码</p> <pre><code><script setup lang="ts"> const toto = (msg: string) => { console.log(msg) } </script> </code></pre> <p>这是我的 eslintrc.js</p> <pre><code>module.exports = { 'env': { 'browser': true, 'es2021': true }, 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential' ], 'parserOptions': { 'ecmaVersion': 13, 'sourceType': 'module' }, 'plugins': [ 'vue' ], 'rules': { 'vue/multi-word-component-names': 'off', 'vue/object-curly-spacing': [2, 'always'], 'vue/html-closing-bracket-spacing': [2, { 'selfClosingTag': 'always' }], 'vue/max-attributes-per-line': [2, { 'singleline': { 'max': 1 }, 'multiline': { 'max': 1 } }], 'semi': [2, 'never'] } } </code></pre> </question> <answer tick="true" vote="10"> <p>您需要配置 eslint 以支持 typescript,因为 eslint 不支持开箱即用。 首先,您需要安装<a href="https://www.npmjs.com/package/@typescript-eslint/parser" rel="nofollow noreferrer">@typescript-eslint/parser</a>,然后安装<a href="https://www.npmjs.com/package/@typescript-eslint/eslint-plugin" rel="nofollow noreferrer">@typescript-eslint/eslint-plugin</a>。 安装完这些后,请按如下方式更新您的配置 - </p> <pre><code>module.exports = { 'env': { 'browser': true, 'es2021': true, node: true }, 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential' ], 'parserOptions': { 'ecmaVersion': 12, 'sourceType': 'module', parser: '@typescript-eslint/parser' }, 'plugins': [ 'vue', '@typescript-eslint' ], 'rules': { 'vue/multi-word-component-names': 'off', 'vue/object-curly-spacing': [2, 'always'], 'vue/html-closing-bracket-spacing': [2, { 'selfClosingTag': 'always' }], 'vue/max-attributes-per-line': [2, { 'singleline': { 'max': 1 }, 'multiline': { 'max': 1 } }], 'semi': [2, 'never'] } } </code></pre> </answer> <answer tick="false" vote="1"> <p>就我而言,问题是我使用解析器选项作为数组,而不是字符串:</p> <pre><code> parserOptions: { - parser: ['@typescript-eslint/parser'], + parser: '@typescript-eslint/parser', }, </code></pre> </answer> <answer tick="false" vote="0"> <p>如果你在项目中同时使用 JS 和 TS,此配置有帮助</p> <pre><code> overrides: [ { files: ['*.vue'], parser: 'svelte-eslint-parser', parserOptions: { parser: { // Specify a parser for each lang. ts: '@typescript-eslint/parser', js: 'espree', typescript: '@typescript-eslint/parser' } } } ], </code></pre> </answer> <answer tick="false" vote="-1"> <p>我在节点 v12.22.9 上遇到了这个问题。通过升级到 v14.21.2,我不再遇到解析错误。您可以使用命令升级/安装</p> <pre><code>nvm install v14.21.2 </code></pre> </answer> </body></html>
我有这段代码在“typescript”中运行良好:“3.8.3” 升级到 Angular 10 和 "typescript": "4.0.8" 后,我看到一些 typescript 错误:
在 HTTPS 中运行 Visual Studio 默认 Vue 项目
我使用默认的 Vue 项目模板在 Visual Studio 2019 中创建了一个标准的 Vue 应用程序。我使用的是 Windows 10。这将创建一个可以使用 Vue CLI 启动的简单项目。这...
我正在尝试使用 Vue 以编程方式阻止 HTML 对话框元素的关闭事件关闭对话框。这是我正在使用的代码: 从“vue”导入{ref}; const 对话框模板Re...
在Vite-Vue应用程序中,我实现了index.html和vue组件/视图的样式,但浏览器将它们显示为被划掉。 AMany =我在组件/视图中添加的样式也是 cro...
vue-router useRouter 在构建库组件时不起作用
我正在构建一个 Vue3 npm 组件库,希望我可以使用 vue-router 的 useRouter 访问当前路由器,并且它将由导入我的任何 vue 应用程序自动提供
Vue 2.0 + webpack 使用 npm 包中的组件
我正在尝试使用 webpack 和 Vue 2.0 设置一个项目,但在我的项目中使用 npm 包(如 vue-parallax)中的组件时遇到了一些麻烦。 我安装了该软件包并且一切...
Quasar Vue Router 解析名为route的href
我正在尝试使用 vue router 构建 href 链接 我在routes.js中有以下内容 常量路由 = [ { 小路: ”/”, 组件:() => import("layouts/MainLayout.vue")...
OpenAPI 生成器 - typescript - 如何设置 API 密钥?
使用 OpenAPI typescript Generator,如何设置 API 密钥? 这是使用 typescript-fetch 生成器执行此操作的方法 const api = new DefaultApi(新配置({ apiKey: apiEndpoints.
'tslib'是一个'typescript'库,它怎么会比'typescripts'下载次数更多? 如果不使用“typescript”,则无法使用“tslib”。 使用“typescript”并不意味着“tslib”是...
在 build/dev ("dev": "vue-cli-service build --dest=../static/ --mode=development --watch") 命令生成后,我使用 Vue 和 Vuetify 构建我的应用程序文件转到静态目录
我使用 Vue router 4 创建了一个新的 Vue 3 应用程序。 当我通过 访问链接时,它会打开页面,但是当我直接打开链接时,它会显示未找到错误。 { 不是芙...
// @ts-ignore 注释使 TypeScript 编译器能够忽略其下面的行。 如何使用 TypeScript 忽略一整段代码?
为什么 @typescript-eslint/no-redeclare 规则指示误报?
我有一个 typescript 项目,其中通过 eslint 和 typescript-eslint 支持 linting。 请注意,这只是一个最小的工作示例。 这是一个repl链接 索引.ts 函数 testfn(值:...
升级我的项目后,每次尝试在计算变量中使用 VueI18n.t() 时,我都会收到此警告: [Vue warn]:在计算的 getter 内部调用 getCurrentInstance()。这是inco...
生成构建时出错:[vite:load-fallback] 无法加载
问题似乎是我在TypeScript和路径(别名)中设置了baseUrl。 typeScript 的配置 "baseUrl": ".", “路径”:{ “屏幕/*”:[“./src/
从 TypeScript 的 esLint 中删除函数警告中缺少返回类型
我正在将 eslint 与 TypeScript 结合使用。 我想关闭对函数显式返回类型的检查。 我已在 .eslintrc.js 中的规则中添加了属性“@typescript-eslint/exp...
Vue.js 完全新手。 我正在关注 Kirby CMS 团队制作的教程。 Vue 正在使用 [email protected] 进行构建,作为 KirbyUp 捆绑器的一部分。 所以,我可以在
如何使用Websocket从FastAPI(后端)返回JSON到Vue(前端)?
我有一个应用程序,前端是用Vue实现的,后端使用FastAPI框架。通信是通过websocket实现的。 目前,前端允许用户
自动完成功能不适用于 VSCode 中的 TypeScript + Node
所以如果我编写纯 JS (.js),它的工作方式如下: 但对于 TypeScript (.ts) 它不起作用:
我按如下方式设置代码,并且能够从 SomeComponent.vue 中的 setter 更新 App.vue 中的 checkout_info,但 SomeComponent.vue 中的 getter 不是响应式的。 // 应用程序.vue 导出默认值 {...
使用 typescript-eslint 创建自定义规则时可以访问常量值吗?
我正在尝试使用 @typescript-eslint/utils 添加自定义 ESLint 规则,以在 Category 的 prop 类型与正则表达式不匹配时显示警告: 从'@typescript-eslint导入{ESLintUtils,TSESTree}...
获取 typescript-eslint 来检测纱线存储库中的单次运行模式
我在大约 20 个 TypeScript 项目的 monorepo 中遇到了 typescript-eslint 内存不足错误。这是一个已知问题,缓解措施之一是启用单次运行检测...
我正在从 Vue router Doc 学习相对重定向。 我正在尝试实现代码的文档示例。 常量路由 = [ { // 始终将 /users/123/posts 重定向到 /users/123/prof...
我一直在使用 TypeScript 装饰器,但只是没有运气让它们工作。我读过如何实现打字稿装饰器?还有http://blog.wolksoftware.com/decorators-reflection-
我有以下代码: 导出默认类自定义扩展 Vue { 安装(){ console.log(this.$el); ...
“拒绝应用 {link} 中的样式,因为其 MIME 类型不受支持且启用了严格的 MIME 检查。”在 Vue+Vuetify 应用程序中
我使用 vue-create-app 创建了一个 Vue+Vuetify 项目。在我的本地系统中,Vuetify 工作正常,但在 Gitlab 实时服务器上不起作用。并在实时应用程序中显示此错误消息: “拒绝应用...
我试图在 Vue 3 中按名称渲染对象列表,但我不断收到“无法读取未定义的属性(读取“名称”)”错误。 我对 Vue 还是新手,我不知道......
Blazor 使用 typescript 并导入 Three.js
我正在开发一个 Blazor WASM 应用程序,其中使用 Microsoft.TypeScript.MSBuild nuget 包,以便对所有相关的 javascript 代码使用 typescript。 但当涉及到进口...
如何定义typescript类型多维矩阵嵌套数组 每层每个数组元素的长度仍然相同? 类型固定数组 = T[] & { 冷...
我在 Pinia 商店中有一些 Vue3 (CompositionAPI) 代码,但更具体地说,这是一个 TypeScript 问题。 代码如下所示: 导出 const useCommonStore = DefineStore("common",...
我有一个 eslint 配置,它扩展了其他一些配置。这些包依赖于“@typescript/eslint-plugin”,但它们使用不同的版本。 扩展:['airbnb', 'airbnb-typescript', '@some-p...
我正在使用 vue-i18n 来本地化我的表单。我有一个电子邮件字段,其中有一个占位符,其中包含一个包含 @ 符号的示例电子邮件地址。 emailPlaceholder:'例如:[email protected]'
在 `@typescript-eslint/parser` AST 中获取超类引用
给定以下类层次结构: 类 Foo { foo成员= 1; } 类 Bar 扩展 Foo { 酒吧成员 = 2; } @typescript-eslint/parser 的 AST 输出将 extends Foo 语句引用为
Laravel 和 Vue Js 应用程序中的脚本无法使用响应正文(原因:CORS 缺少允许来源)
开发 Laravel 10 + Vue Js 3 应用程序两个项目文件是分开的。我也有以下 api.php 登录路线 路线::post('/login', [LoginController::class, '提交']); 并使用
为什么从其他文件导入的 SCSS 变量在 Vue 3 中不起作用?
我在我的vue 3项目中安装了sass loader,但问题是我想从另一个文件导入变量,但不起作用 我的架构是: 源代码 资产 CSS 样式.scss
我正在使用 Vue 3、Vuetify 3 和 Pinia 开发一个应用程序,所有这些我都在学习过程中。我正在尝试按照这个视频来学习 Pinia,大约 17:50,演示者说要安装...
为了使用动态定义的单页面组件,我们使用组件标签,因此: ... 从 '@/
Jest + TypeScript + Babel 未知选项:.0
我使用 Jest 为我的一些 Fauna DB 操作编写了一个集成测试。我尝试测试的源代码 (fauna.ts) 和测试本身 (fauna.test.ts) 都是 TypeScript 文件。我已经
如何在 Vercel 中使用 Vue 前端部署 Express 应用程序?
我将 Vue 应用程序构建到名为 dist 的文件夹中。 我有用 Node Express 编写的后端 API。 当我在 Vercel 上部署它时,出现 404 错误。 这是我的应用程序结构和 Vercel 设置...
我创建了我的 Vue-Vite 应用程序。然后我在 dev.azure - Web App 上创建了存储库。接下来我将其部署在portal.azure.com 上。修复了一些错误后,我仍然不知道如何修复此错误: 主要....
我正在使用vue js可拖动插件 它对于单个列表工作得很好,但我需要使用多个列表(比如 Jira board)。我想将一张卡片(元素)从一个列表移动到另一个列表,但是它
如何为我的多组件 Vue 3/Vuetify 3 应用程序中的每个组件提供一个常量?
我有一个用 Vue 3 和 Vuetify 3 编写的应用程序。它有多个组件,所有组件都显示货币金额。我希望货币金额以适合的格式显示...
在使用我发布的包时出现错误“TextEncoder 不是构造函数”
我用 ReactJs、TypeScript 和 rollup 编写了一个包。 这是我的 rollup.config 从“@rollup/plugin-node-resolve”导入解析; 从“@rollup/plugin-typescript”导入打字稿; 进口...
如何在 vue javascript 应用程序中显示服务器目录中的所有图像
我正在尝试将主机(服务器)上的一个目录(图表)中存在的所有图像显示到 vue 页面中,而不必手动将它们全部列出在数据中,因此必须重建...
是否可以在网页中嵌入 TypeScript 代码?我想将 TypeScript 代码嵌入到脚本标签中,如下所示(以便它自动编译为 Javascript): <p>是否可以在网页中嵌入 TypeScript 代码?我想将 TypeScript 代码嵌入到脚本标签中,如下所示(以便它自动编译为 Javascript):</p> <pre><code><script type = "text/typescript"> //TypeScript code goes here </script> </code></pre> </question> <answer tick="true" vote="28"> <p>实际上有几个项目允许您使用类似的 TypeScript 代码 - <a href="https://github.com/niutech/typescript-compile" rel="noreferrer">TypeScript Compile</a>、<a href="https://github.com/ComFreek/ts-htaccess" rel="noreferrer">ts-htaccess</a>。</p> <p>这里的问题是 .ts 代码应该编译成 JavaScript - 它可以在客户端完成(速度慢;整个 TSC 也应该加载到客户端)或在服务器端完成(显然更快,而且它更快)在编译代码上利用缓存要容易得多)。</p> </answer> <answer tick="false" vote="18"> <p>这是我编写的版本,<strong>直接</strong>使用 Microsoft/TypeScript/master 的版本,因此它始终保持最新:<a href="https://github.com/basarat/typescript-script" rel="noreferrer">https://github.com/basarat/typescript-script</a></p> <p>您甚至可以将 <pre><code>ts</code></pre> 指向您可能拥有的任何其他 TypeScript 版本,它会正常工作 🌹</p> </answer> <answer tick="false" vote="6"> <p>已经为此目的开发了一个 JavaScript 库 - 它称为 <a href="https://github.com/niutech/typescript-compile" rel="noreferrer">TypeScript Compile</a>,它允许将 Typescript 嵌入到 HTML 中(如上所示。)</p> </answer> <answer tick="false" vote="0"> <p>我写这篇文章的目的是为了在浏览器中编译 TypeScript,以便我可以编写快速简单的示例来分享。</p> <p><a href="https://github.com/Sean-Bradley/text-typescript" rel="nofollow noreferrer">https://github.com/Sean-Bradley/text-typescript</a></p> <p>使用,</p> <pre><code><script type="text/typescript"> // Your TypeScript code here </script> </code></pre> <p>并包含依赖项。</p> <pre><code><script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="67131e17021404150e1713275249544954">[email protected]</a>"></script> <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="3743524f431a434e47524454455e4743770619041907">[email protected]</a>"></script> </code></pre> <p>一个完整的示例,您可以复制/粘贴到 HTML 文档中并在本地尝试。</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>"text/typescript" example</title> <meta name="description" content="Transpiling and executing TypeScript in the browser" /> <style> body { overflow: hidden; margin: 0px; font-size: 15vw; } </style> <script type="text/typescript"> function foo(bar: string) { return "Hello " + bar; } let baz = "World!"; document.getElementById("root").innerHTML = foo(baz); </script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="13676a63766070617a636753263d203d20">[email protected]</a>"></script> <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="ec98899498c198959c899f8f9e859c98acddc2dfc2dc">[email protected]</a>"></script> </head> <body> <div id="root"></div> </body> </html> </code></pre> <p>你可以看到它在这里、现在、今天发挥作用。</p> <p><a href="https://editor.sbcode.net/f1f4b5a73ec40283d1ddb37bb1e71f7e4e31b487" rel="nofollow noreferrer">https://editor.sbcode.net/f1f4b5a73ec40283d1ddb37bb1e71f7e4e31b487</a></p> </answer> </body></html>
node/nodemon 中是否有对 typescript 的源映射支持?
我有一个用 typescript@2 编写的节点项目。 我的 tsconfig 将 sourceMap 设置为 true 并生成 *.map.js 文件。当我通过 node 或 nodemon 执行转译的 *.js JavaScript 文件时,我...
有没有办法让我的 WordPress 网站指向 diste/templates 目录中的 index.html 而不是正常的 WordPress 行为?
我正在使用 Vue.js 开发一个无头 WordPress 网站,并且我有一个名为 vue-wordpress 的自定义主题。该主题是使用 Vue CLI 搭建的。这是目录结构 - 距离 资产 模板