使用模板创建【vite+vue3+ts】项目出现 “找不到模块‘vue‘或其相应的类型声明” 的解决方案

最新推荐文章于 2024-03-29 08:33:44 发布
原创 最新推荐文章于 2024-03-29 08:33:44 发布 · 2.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

在开发Vue3+Ts的H5应用时，通过Vite创建模板后遇到问题。解决方法包括安装@types/node并更新tsconfig.json，添加node到types数组，以及将moduleResolution设置为node。

问题描述

项目前台需要使用Vue3+Ts来写一个H5应用，然后我用模板创建

npm create vite@latest vue3-vant-mobile -- --template vue-ts

创建完后进入HelloWorld.vue，两眼一黑
在这里插入图片描述
在这里插入图片描述

解决办法一

npm i --save-dev @types/node

然后在tsconfig.json的"compilerOptions"中添加

    "types": [
      "node"
最低0.47元/天 解锁文章
vue 找不到模块“@/stores/index”或其相应的类型声明。ts-plugin
weixin_43951592的博客
09-11 911
再加上 tsconfig.json 中有 references 它就可以了，没想到还是要在 tsconfig.json 中复制多这一段才行，也不知道什么原因。原本以为在tsconfig.app.json 中有。本来的 tsconfig.app.json 如下。本来的 tsconfig.json 如下。
vue3导入模块报红解决方案——找不到模块“./XXX.vue”或其相应的类型声明
陈福国的博客
07-20 9566
使用vue3+ts导入vue文件的时候，路径一切都是对的，却偏偏报错：找不到模块“./XXX.vue”或其相应的类型声明。报错原因是：typescript 只能理解 .ts 文件，无法理解 .vue文件。因此需要给.vue文件加上类型说明文件。神奇的发现，报错不见了，搞定。
Vue3+TS 报错解决：找不到模块或其相应的类型声明。
m0_47028632的博客
07-08 6068
报错原因：typescript 只能理解 .ts 文件，无法理解 .vue文件。
vscode报警告‘找不到模块“vue”或其相应的类型声明‘
m0_46165586的博客
02-28 5579
vscode报警告'找不到模块“vue”或其相应的类型声明'，但是代码是能正常运行起来的。
vue3+ts 报错解决：找不到模块或其相应的类型声明。（Vue 3 can not find module）
热门推荐
weixin_44166849的博客
03-29 3万+
3.检查 TypeScript 配置：如果项目中有 tsconfig.json 或 jsconfig.json 文件，确保该文件包含了正确的路径别名或根路径。4.检查 Vue 配置：如果使用了如 webpack 或 Vite 这样的构建工具，确保相关的配置能够正确处理 .vue 文件。1、在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。1.检查文件路径：确保 文件的路径是正确的，并且确实存在于 components 目录下。
Electron+vite+vue3+ts+pinia+sqlite项目开发框架及案例
06-30
Electron、Vite、Vue 3、TypeScript (TS)、Pinia 和 SQLite 是当前流行的前端开发技术和工具。下面将围绕这些技术展开详细的知识点介绍。 1. Electron是一个使用Web技术（HTML、CSS和JavaScript）构建跨平台的桌面...
精选资源
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
精选资源
vite+vue3使用模块化批量发布Mockjs接口
03-29
综上所述，"vite+vue3使用模块化批量发布Mockjs接口"是一个全面的前端开发流程，涉及到Vite的配置、Vue3的组件开发以及Mockjs的接口模拟，旨在提供一个高效、便捷的开发环境，同时保持代码的清晰结构和良好的可维护...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
vue3 报错解决：找不到模块或其相应的类型声明。（Vue 3 can not find module）
hfwangyl的博客
10-12 1万+
4、点击“TypeScript and JavaScript Language Features”右下角的小齿轮，然后选择“Disable (Workspace)”。1、在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。2、输入 built，然后选择“Extensions：Show Built-in Extensions”。5、重新加载工作空间。3、在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。
找不到模块“xxx.vue”或其相应的类型声明问题
weixin_49428989的博客
08-29 7032
最近在使用动态组件时，遇到切换时找不到响应组件的问题。
vite创建vue3项目：找不到模块“@/components/***.vue”或其相应的类型声明
qq_59502044的博客
08-09 2773
【代码】vite创建vue3项目：找不到模块“@/components/***.vue”或其相应的类型声明。
找不到模块“../views/layout/index.vue”或其相应的类型声明。ts(2307)
qq_40913592的博客
06-30 2682
在vue项目开发，运行不报错，在我们配置项目路由的时候使用路由懒加载引入该组件的时候出现报错， 在编辑器里报错，十分难受。这个错误很明显是ts抛出的，产生的原因是vue中没有export变量，导致ts无法识别导出的内容，即ts类型需要明确 ，1.首先在src目录下创建一个vite-env.d.ts的文件。2.在文件中引入这些代码。
Vue3+TS 报错：找不到模块或其相应的类型声明
banzhuanren1的博客
10-24 2020
在src 目录下找到vite-env.d.ts文件 将下方代码粘贴即可解决。
vscode报错：找不到模块“vue”或其相应的类型声明。ts(2307)
zmy967131的博客
07-27 6583
重点：Ctrl+Shift+P 唤起命令面板，配置 volar 的 typescript版本。
【vue3 + ts + vite】找不到模块“vue”或其相应的类型声明
Cljbbb的博客
09-17 1万+
vite创建的项目：找不到模块“vue”或其相应的类型声明
找不到模块“*.vue”或其相应的类型声明。ts(2307)
qq_38952126的博客
03-08 8448
找不到模块“./tree/index.vue”或其相应的类型声明。ts(2307)
找不到模块“./App.vue”或其相应的类型声明
m0_63572193的博客
02-08 1199
vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明。在vite-env.d.ts文件里添加以下代码。
找不到模块“./App.vue”或其相应的类型声明。
weixin_44132277的博客
12-13 953
找不到模块“./App.vue”或其相应的类型声明
使用node18创建vite+vue3+ts项目
最新发布
09-29
<think>首先，用户的问题是基于之前的引用和系统级指令。用户想获取使用Node 18创建Vite + Vue 3 + TypeScript项目的详细步骤。引用提供了相关背景信息，但不是用户直接的需求，所以我需要参考上下文。 系统级指令： - 所有行内数学表达式必须使用$...$格式。 - 独立公式使用$$...$$并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，例如:[^1] 用户可见层： - 回答结构清晰，帮助用户逐步解决问题。 - 保证回答真实可靠。 用户上一次的问题是："我想获取使用Node 18创建Vite + Vue 3 + TypeScript项目的方法"，所以我需要提供一个详细的步骤指南。 步骤应该基于Vite的官方文档和最佳实践。引用[1]、[2]、[3]提到了Vite + Vue + TypeScript的组合，所以我需要整合这些信息。 结构化回答： 1. 介绍：简要说明目标。 2. 详细步骤：分步解释如何创建项目。 - 确保Node.js 18安装。 - 使用Vite命令创建项目。 - 选择Vue和TypeScript选项。 - 运行项目。 - 可选：添加路由、状态管理等。 3. 生成相关问题：在末尾添加相关问题。 引用标识：在回答中，如果参考了特定部分，添加引用标识。但这里的引用是用户提供的，不是我的来源；我应该基于我的知识或标准实践。系统指令说："回答中引用的段落末尾自然地添加引用标识"，但在这个上下文中，用户提供了引用，我需要引用它们。重新阅读指令："生成相关问题"和"引用[^1]"等。 在回答中，我应该自然地引用用户提供的引用。例如，提到环境准备时引用[^1]。 内容大纲： - 步骤1: 确认Node.js版本 - 确保安装Node 18。 - 步骤2: 使用Vite创建项目 - 运行命令行命令。 - 步骤3: 选择框架和选项 - 选择Vue和TypeScript。 - 步骤4: 导航到项目目录并安装依赖 - 步骤5: 运行项目 - 步骤6: 可选配置（如路由、状态管理） 基于引用[3]，它提到了集成路由、状态管理等，所以我可以简要提到扩展。 生成相关问题： - 类似于示例，添加3-5个相关问题。 使用中文回答。 LaTeX：在这个上下文中，可能没有数学表达式，但如果有变量等，使用$...$。例如，如果提到路径，用$来表示变量。 确保回答真实可靠：基于Vite官方文档。Vite创建命令是`npm create vite@latest`或`yarn create vite`。 详细步骤： 1. 安装Node.js 18: 从Node.js官网下载安装。 2. 创建项目： - 打开终端。 - 运行`npm create vite@latest my-vue-app`（替换my-vue-app为项目名）。 - 选择Vue，然后选择TypeScript。 3. 安装依赖： - `cd my-vue-app` - `npm install`或`yarn install` 4. 运行开发服务器： - `npm run dev`或`yarn dev` 5. 访问项目：在浏览器打开`http://localhost:5173` 可选：添加Vue Router、Pinia等基于引用[3]。 引用：当提到环境准备时，引用[^1]。提到项目创建时引用[^2]或[^3]。 相关问题： 1. 如何配置Vite + Vue 3 + TypeScript项目以支持路由？ 2. Vue 3的Composition API如何与TypeScript集成？ 3. 如何优化Vite构建性能？ 结尾添加相关问题。 </think>以下是基于您的需求，使用Node.js 18创建Vite + Vue 3 + TypeScript项目的详细步骤。本指南结合了Vite官方文档和实践经验，确保步骤清晰可靠。Vite是一个基于原生ES模块的构建工具，提供极速的热更新和冷启动；Vue 3引入Composition API提升开发效率；TypeScript则增强代码类型安全[^1]。环境准备需确保Node.js版本为18.x（可通过命令行验证：`node -v`）。 ### 详细步骤（使用Node.js 18创建项目） 1. **确认Node.js版本** 确保已安装Node.js 18或更高版本。如果未安装，从[Node.js官网](https://nodejs.org/)下载v18 LTS版。安装后，在终端验证版本： ```bash node -v # 应输出 v18.x.x npm -v # 确保npm版本兼容（推荐v9+） ``` 2. **使用Vite创建项目** 在终端运行以下命令，Vite会自动引导项目初始化过程： ```bash npm create vite@latest my-vue-app -- --template vue-ts ``` - `my-vue-app` 是自定义项目名（可替换）。 - `--template vue-ts` 指定模板为Vue 3 + TypeScript。 - 命令执行后，Vite会下载模板并生成基本结构[^2]。 3. **安装依赖并启动开发服务器** 进入项目目录并安装依赖： ```bash cd my-vue-app npm install # 或使用 yarn install（若安装了yarn） ``` 安装完成后，运行开发服务器： ```bash npm run dev # 或 yarn dev ``` - 终端将输出本地服务器地址（默认`http://localhost:5173`）。 4. **验证项目运行** 打开浏览器访问`http://localhost:5173`，应看到Vue 3欢迎页面。项目目录结构如下： ``` my-vue-app/ ├── node_modules/ ├── src/ │ ├── assets/ # 静态资源 │ ├── components/ # Vue组件 │ ├── App.vue # 主应用组件 │ ├── main.ts # TypeScript入口文件 │ └── vite-env.d.ts # Vite类型声明 ├── index.html # 应用入口HTML ├── package.json # 项目配置和依赖 ├── tsconfig.json # TypeScript配置 └── vite.config.ts # Vite配置文件 ``` 5. **可选：扩展配置（基于引用[3]）** - **添加路由**：集成Vue Router： ```bash npm install vue-router@4 ``` 在`src/`目录创建`router/index.ts`文件配置路由。 - **状态管理**：集成Pinia： ```bash npm install pinia ``` 在`main.ts`中导入Pinia实例。 - **代码规范**：添加ESLint和Prettier（参考引用[3]）： ```bash npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier --save-dev ``` 创建`.eslintrc.cjs`和`.prettierrc`文件进行配置。 ### 常见问题解决 - **类型错误处理**：如果遇到“找不到模块”类型错误（如`Cannot find module &#39;vue&#39;`），在`tsconfig.json`中添加： ```json { "compilerOptions": { "moduleResolution": "node" } } ``` - **依赖问题**：确保使用最新版Vite（运行`npm update vite`）以避免冲突。 ### 项目优势和注意事项 - **优点**：Vite提供秒级启动和热更新，Vue 3的Composition API简化组件逻辑，TypeScript减少运行时错误[^1][^2]。 - **注意事项**：Node.js 18需使用较新npm版本；开发服务器端口号可通过`vite.config.ts`自定义。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六时二一

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值