vue3+vite导入并初始化cesium

一.初始化vite

参考命令：开始 {#getting-started} | Vite中文网

yarn create vite my-vue-app --template vue

 cd my-vue-app
yarn 
yarn dev

访问http://127.0.0.1:5173/

二.查找cesium插件

网址：GitHub - vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js

三.导入cesium

参考：GitHub - nshen/vite-plugin-cesium: ⚡ Vite plugin for Cesium

1.安装并配置vite.config.js

命令行安装

yarn add cesium vite-plugin-cesium vite -D

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()],
});
// https://vitejs.dev/config/
​

2.App.vue初始化代码

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import { Viewer } from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  const viewer = new Viewer("cesiumContainer");
});
</script>
​
<style scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

项目结构

四.运行查看地图

yarn dev

访问:http://127.0.0.1:5173/