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

**使用模板创建 Vite + Vue3 + TS项目出现 "找不到模块 'vue' 或其相应的类型声明" 的解决方案**

在最近的几年里，前端开发领域有了巨大的进步。随着 Webpack 的出现，我们可以更轻松地管理和优化我们的构建过程。但是，随着时间的推移，Webpack 的配置变得越来越复杂，这也导致了性能问题。

Vite 是一个新兴的构建工具，它通过在开发环境中使用 ES 模块（ESM）而不是 CommonJS 来解决上述问题。它可以显著减少构建过程中的开销，并且支持热重载、零配置等特性。

本文将指导你如何使用模板创建 Vite + Vue3 + TS项目，解决 "找不到模块 'vue' 或其相应的类型声明" 的问题。

### 步骤一：安装 Node.js 和 npm首先，我们需要确保你的电脑上已经安装了 Node.js 和 npm。可以通过以下命令检查：

bashnode -vnpm -v

如果没有安装，请访问 [Node.js 官网]( 下载并安装。

### 步骤二：创建新项目接下来，我们使用模板创建一个新的 Vite + Vue3 + TS项目。可以通过以下命令进行：

bashnpm create vite@latest my-vue-app -- --template vue-ts

这里的 `my-vue-app` 是你的项目名称，`--template vue-ts` 表示我们选择了 Vue3 + TS 模板。

### 步骤三：安装依赖在新创建的项目目录下，运行以下命令安装依赖：

bashnpm install

这将下载并安装所有必要的依赖包。

### 步骤四：解决找不到模块问题现在，我们进入到项目根目录下的 `src` 目录中。这里我们会发现一个名为 `main.ts` 的文件，这是我们的应用程序入口点。

在这个文件中，我们需要导入 Vue 库：

typescriptimport { createApp } from 'vue'

但是，编译器可能会提示 "找不到模块 'vue' 或其相应的类型声明"。这是因为我们没有安装 Vue 的类型定义包。

可以通过以下命令安装 Vue 的类型定义包：

bashnpm install @types/vue --save-dev

或者，如果你使用的是 yarn，可以这样：

bashyarn add @types/vue --dev

### 步骤五：配置 tsconfig.json在项目根目录下，我们需要修改 `tsconfig.json` 文件。这个文件负责配置 TypeScript 的编译选项。

我们需要添加以下代码到 `compilerOptions` 中：

json"paths": {
 "@/*": ["src"]
}

这样，我们就可以使用 `@/` 来导入 src 目录下的模块了。

### 步骤六：启动应用最后，我们可以通过以下命令启动我们的应用：

bashnpm run dev

或者，如果你使用的是 yarn，可以这样：

bashyarn dev

这将启动 Vite服务器，并且我们就可以在浏览器中访问我们的应用了。

### 总结本文指导你如何使用模板创建 Vite + Vue3 + TS项目，解决 "找不到模块 'vue' 或其相应的类型声明" 的问题。通过一步步的操作，我们可以轻松地建立一个新的 Vite + Vue3 + TS项目，并且解决编译器提示的错误。

希望本文对你有所帮助。如果你有任何疑问或建议，请在评论区留言。