Cesium安装配置

### Cesium 安装与配置教程

#### 使用 Vue CLI 创建项目并集成 Cesium

对于基于 Vue.js 的开发环境，特别是使用 `vue-cli` (版本 5+) 和 Cesium (版本 1.90+) 进行构建时，存在多种方法来设置和初始化应用。其中较为推荐的方式之一是在创建好Vue项目的前提下通过npm安装Cesium库[^1]。

npm install cesium --save

接着，在项目中的适当位置定义组件逻辑：

// App.vue 文件内的脚本部分
<script setup lang="ts">
import { Viewer } from 'cesium';
import { onMounted } from 'vue';

onMounted(() => {
    const viewer = new Viewer('cesiumContainer');
});
</script>

同时确保HTML模板中有对应的容器用于承载地图视图:

<template>
<div id="cesiumContainer"></div>
</template>

样式方面也需要做相应调整以保证页面布局合理：

<style scoped>
html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

#cesiumContainer {
    width: 100%;
    height: 100vh;
    background-color: black;
}
</style>

以上操作完成后即可实现在Vue应用程序内加载三维地球模型的效果[^3]。

#### 手动下载并配置 Cesium 库

另一种常见的做法是从官方网站获取最新版的Cesium发行包，并将其放置于自建的工作目录之下。具体来说就是建立一个新的工作空间（比如命名为test），随后把解压缩得到的内容以及依赖描述文件(`package.json`)复制进去[^4]。

这种方法适合那些希望通过直接控制资源路径来进行部署的情况，同时也便于离线环境下运行程序。