最新版Vue3+TS+Vite+Cesium项目构建过程20240717

1.使用pnpm create vite创建项目

2.定义项目名称Vue3+TS+Vite+Cesium

3.选择vue框架

4.选择TypeScript

5.然后执行pnpm install初始化安装依赖

6.安装vue-router，安装命令pnpm i vue-router@next，安装完成后再项目中进行配置

7.安装Cesium，安装命令pnpm add cesium -S

8.安装vite中Cesium插件，安装命令pnpm add vite-plugin-cesium -D

9.在vue.config.js中需要配置cesium，配置如下：

10.使用Cesium创建地图视图

注意

在使用 Vue 3 开发项目时，遇到“找不到模块 ‘@/components/xxx.vue’ 或其相应的类型声明”的错误是一个常见问题。这通常与 TypeScript 和模块解析相关的配置不当有关。本文将详细介绍如何解决此问题，确保你的项目能够正确识别和导入 Vue 组件。

在 Vue 项目中，@ 符号通常用作别名，指向项目的根目录（一般是 src 目录）。这使得模块导入路径更简洁和直观。然而，当使用 TypeScript 时，除了配置 Webpack 或 Vite 以支持别名外，还需要在 TypeScript 配置文件中同步更新别名设置，否则 TypeScript 编译器无法解析这些路径，导致无法找到模块或其相应的类型声明。

1、安装依赖（主要用于解决 Node.js 环境相关的类型定义问题）

pnpm i @types/node -D

2、在 vite.config.ts 文件中配置别名：

在defineConfig配置项里面增加下面配置：

3、在 tsconfig.json 文件中配置路径映射：
在compilerOptions里面增加以下配置

4、重启编辑器VS Code
重启后找不到模块这个问题就解决了。完成以上配置后，你可以使用 @ 别名来导入 Vue 组件，而不会遇到模块解析错误。

以上过程程序均安装最新版