2 Vue3+vite+Cesium 环境搭建

目录

前言

安装插件

配置vite.config 

创建地球

App.vue

HelloWorld.vue

---

前言

在完成Vue3+vite的项目基础上搭建基础上构建 Cesium的环境搭建，内容如下

1. 安装Cesium及Cesium的插件 vite-plugin-cesium插件
2. 配置vite.config.js
3. 创建地球

安装插件

使用 npm 胡哦 yarn 均可

 yarn add cesium vite-plugin-cesium -D  // 使用yarn 安装最新的cesium 以及 vite-plugin-cesium 插件

配置vite.config 

引入 import cesium from 'vite-plugin-cesium';

在 defineConfig 的 plugins 中 加入  cesium() 如下

 

创建地球

在上面都完成的基础上构建地球（我的世界）,修改项目的App.vue 和 HelloWorld.vue

App.vue

<template>  
  <HelloWorld />
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
</script> 

<style scoped >
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 {Viewer} from 'cesium';
onMounted(()=>{
  let viewer = new Viewer("cesiumContainer",)
})
</script>
<style >
#cesiumContainer{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

ok 至此你完成了地球创建 运行 看效果

yarn dev