Cesium+Vue3+vite环境搭建详细教程

Cesium从入门到项目实战总目录： 点击

1、打开vite的官网

官网地址：https://cn.vitejs.dev/

2、搭建第一个Vite项目

npm create vite@latest

3、安装Cesium插件

cesium插件：vite-plugin-cesium

npm i cesium vite-plugin-cesium vite -D

4、配置vite.config.js

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

5、清空style.css中的样式

6、配置App.vue

清空一切不需要的，设置样式使得全屏

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

<style >
html,body,#app{
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}
</style>

7、配置HelloWorld.vue

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import {onMounted} from "vue";
import * as Cesium from 'cesium';
onMounted(()=>{
  let viewer = new Cesium.Viewer("cesiumContainer",)
})
</script>
<style >
#cesiumContainer{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

注意：删除App.vue组件中style样式中的scoped，scoped表示只在当前组件显示。

欢迎您关注我的原创公众号【GISer世界】，回复Cesium获取搭建好的各个版本环境。