配置vite_vue_cesium

第一步：安装vite

第二步：搭建第一个Vite项目

pnpm create vite@latest

运行该命令，会在终端要求输入项目名称，我输入test_earth

第三步：在相应的目录看到test_earth文件夹后，命令行输入

cd test_earth

第四步：安装cesium插件：pnpm i cesium vite-plugin-cesium vite -D

第五步：配置vite.config.js

import cesium from 'vite-plugin-cesium';

export default defineConfig({ plugins: [vue(),cesium()]

})

第六步：清空style.css中的样式

第七步：配置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>

第八步：配置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>

第九步：执行pnpm dev