Cesium+Vue3学习教程系列（1）---环境搭建

本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，相关源码全部免费公开。请关注文中图片右下角gzh，关注后私信“Cesium学习系列源码”，即可看到全部代码。
这里先从最基本的环境搭建开始。

1、打开cmd，输入
npm create vite@latest cesium-project
然后选择Vue、TypeScript。安装命令行提示

cd cesium-project
npm install

2、使用VScode打开刚才建的工程，在终端里输入以下命令安装cesium及

npm install cesium
npm install vite-plugin-cesium

安装完成后，可以查看package.json ,cesium当前使用的是最新版1.133.1

Cesium+Vue3学习教程系列（1）---环境搭建

3、在vite.config.ts里添加插件

import cesium from  vite-plugin-cesium 
export default defineConfig({
  plugins: [vue(),cesium(),],
})

4、编写测试代码，主要需要将Cesium.Ion.defaultAccessToken设置为你自己的token。

<template>
   <div id="cesium-container"></div>
</template>
<script setup lang="ts">
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
    Cesium.Ion.defaultAccessToken = "your token"
    const viewer = new Cesium.Viewer( cesium-container , {});
});
</script>
<style scoped>
#cesium-container {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 10;
}
</style>

5、运行npm run dev，可看到效果

Cesium+Vue3学习教程系列（1）---环境搭建