Vue+Cesium 基础搭建

一、创建Vue工程

npm init vue@latest

二、安装依赖

Sass

npm install sass -D

解决初始cesium无法全屏，主要是替换文件 

Cesium

npm install cesium

 vite-plugin-cesium

npm install vite-plugin-cesium -D

vite-plugin-cesium 是一个专为 Vite 项目设计的插件，用于简化在 Vue.js 应用中集成 Cesium 的过程。它通过自动配置 Cesium 的资源路径和引入方式，使得开发者可以快速启动并使用 Cesium 进行 3D 地图和地球场景的开发。 

三、文件

main.scss

body {
  margin: 0;
  background-color: #f5f5f5;
}

/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  transform: translateX(-30px);
  opacity: 0;
}

.fade-slide-leave-to {
  transform: translateX(30px);
  opacity: 0;
}

Home.vue

<script setup>
import { onMounted } from 'vue'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import * as Cesium from 'cesium'
const Cesium_ACCESS_TOKEN = '....'
Cesium.Ion.defaultAccessToken = Cesium_ACCESS_TOKEN
onMounted(() => {
    const viewer = new Cesium.Viewer("cesiumContainer");
})
</script>
<template>
    <div id="cesiumContainer"></div>
</template>
<style>
#cesiumContainer {
    width: 100vw;
    height: 100vh;
}
</style>

token获取 

App.vue

<script setup>
import HomeVue from './views/Home.vue';
</script>

<template>
<HomeVue/>
</template>

<style scoped>

</style>

 vite.config.js

配置cesium

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import cesium from 'vite-plugin-cesium'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    cesium()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

文件分布 

 四、结果