Vue3 中使用 CesiumJS

        本教程基于目前最新的Vue和CesiumJS版本。

0、前置工作

1）安装 VSCode

2）安装 Node.js

3）使用以下命令安装 pnpm 包管理工具

# 全局安装 pnpm
npm install -g pnpm

        这里说明一下，为什么使用 pnpm 不使用 npm， 因为 pnpm 有以下优势：

• 避免相同依赖在多个项目中重复下载（节省磁盘空间）。
• 不同项目使用同一版本依赖时，只存一份。
• node_modules 更小、更干净。

4）申请 Cesium ion 数据访问 token

        登录 https://ion.cesium.com/ 注册一个账号，然后在以下位置找到token

        只有申请了 token 才能加载地图数据。

1、创建 Vue 项目

参考：https://cn.vuejs.org/guide/quick-start.html

1）打开 VSCode 软件，并打开或创建项目路径

2）在 VSCode 终端输入以下命令创建 Vue 项目

pnpm create vue@latest

        然后如下所示：输入项目名（假设项目名称为 cesium-01），选择常用的 TypeScript, Router, Pinia 支持，选择 Oxlint 。

3）然后分别执行以下命令

   cd cesium-01pnpm install

4）执行以下命令验证Vue项目是否创建成功

pnpm dev

        鼠标点击【Local:   http://localhost:5173/】 浏览器打开 http://localhost:5173/ 如果能正常显示 Vue 的页面表示创建成功。

2、安装 CesiumJS

1）执行以下命令安装 CesiumJS

pnpm add cesium

2）处理Cesium静态资源