一、前提條件
1. **安裝 Node.js**
? ?- 訪問 [Node.js 官方網站](https://nodejs.org/)，下載并安裝適合你操作系統的版本。Node.js 用于運行本地開發服務器和安裝依賴。
2. **安裝 Vue CLI**
? ?- Vue CLI 是一個用于快速開發 Vue.js 項目的工具。在終端中運行以下命令安裝 Vue CLI：

npm install -g @vue/cli

### 二、創建 Vue 項目
1. **創建一個新的 Vue 項目**
? ?- 在終端中運行以下命令創建一個新的 Vue 項目：

? ? ?? ? ?vue create cesium-map-project

? ?- 按照提示進行操作，選擇默認配置即可。
2. **進入項目目錄**

? ?```bashcd cesium-map-project```

### 三、安裝 Cesium
1. **安裝 Cesium**
? ?- 在項目目錄中運行以下命令安裝 Cesium：

? ? ?```bashnpm install cesium```

### 四、修改代碼
1. **修改 `src/App.vue` 文件**
? ?- 將 `src/App.vue` 文件的內容替換為以下代碼：
? ? ?

```vue<template><div id="cesiumContainer"></div></template><script setup lang="ts">// AccessTokens需要到官網獲取，詳細看問題注意點import * as Cesium from "cesium";import "cesium/Build/Cesium/Widgets/widgets.css";import { onMounted } from "vue";Cesium.Ion.defaultAccessToken = '你的AccessTokens'; // 替換為你的 Access Tokenconst init = () => {const viewer = new Cesium.Viewer("cesiumContainer", {homeButton: true, // 首頁位置，點擊之后將視圖跳轉到默認視角sceneModePicker: true, // 是否顯示投影方式控件baseLayerPicker: true, // 是否顯示圖層選擇控件navigationHelpButton: true, // 是否顯示幫助信息控件geocoder: false, // 是否顯示地名查找控件animation: false, // 是否顯示動畫控件timeline: false, // 是否顯示時間線控件fullscreenButton: false, // 視察全屏按鈕vrButton: false, // 是否啟用虛擬現實 (VR) 模式shadows: true, // 影子infoBox: false, // 是否顯示點擊要素之后顯示的信息});};onMounted(() => {init();});</script><style>#cesiumContainer {width: 100%;height: 100vh; /* 設置容器高度為視口高度 */}</style>```- **注意**：將 `'你的AccessTokens'` 替換為你從 [Cesium Ion](https://cesium.com/ion/) 獲取的 Access Token。

### 五、運行項目
1. **啟動開發服務器**
? ?- 在項目目錄中運行以下命令啟動開發服務器：
? ?

 ?```bashnpm run serve```

2. **訪問地圖**
? ?- 打開瀏覽器，訪問 [http://localhost:8080](http://localhost:8080)，就能看到一個三維地球視圖。