范县网站建设费用建设网站的网络公司

1.创建vite项目

npm create vite 项目名称

2. 选择vue+js/ts

3.在终端输入命令

npm install

4.安装cesium插件，在终端输入命令

npm i cesium vite-plugin-cesium vite -D

5.项目配置cesium

在vite.config.js里进行配置

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

6.在App.vue里面进行全局导入 （注：需要id为cesiumContainer的div挂载后再执行Cesium的代码）

<template><div id="cesiumContainer"></div>
</template><script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(() => {const viewer = new Cesium.Viewer('cesiumContainer',{infoBox: false, // 禁用沙箱，解决控制台报错});
});
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
html,body,#cesiumContainer{width: 100%;height: 100%;padding: 0;margin: 0;overflow: hidden;
}
</style>

7、运行项目

npm run dev