Vue3+Vite 初始化Cesium

Vue3+Vite 初始化Cesium

安装依赖

js 复制代码
yarn add cesium
yarn add vite-plugin-cesium -D

加载vite-plugin-cesium插件

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

初始化Cesium

js 复制代码
<template>
	<div id="map"></div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'

onMounted(() => {
	const viewer = new Cesium.Viewer('map')
	window.viewer = viewer
})
</script>

<style lang="scss" scoped>
#map {
	width: 100%;
	height: 100%;
}
</style>

git

相关推荐
人工智能训练2 分钟前
前端框架选型破局指南:Vue、React、Next.js 从差异到落地全解析
运维·javascript·人工智能·前端框架·vue·react·next.js
网络点点滴20 分钟前
Vue3的生命周期
前端·javascript·vue.js
梵得儿SHI37 分钟前
Vue 核心语法之组件基础与通信:从创建到注册的完整指南
前端·javascript·vue.js·组件化开发·全局注册·vue组件的本质·局部注册和异步组件
欧阳的棉花糖1 小时前
不用记复杂路径!3 步让你的 JS 脚本像 “vue create” 一样好用
javascript
韭菜炒大葱1 小时前
从回调到async/await:JavaScript异步编程的进化之路
前端·javascript·面试
与妖为邻1 小时前
HTML5动态时间显示组件
javascript·css·css3
●VON1 小时前
Electron for HarmonyOS 开发环境搭建
javascript·electron·harmonyos
Irene19911 小时前
JavaScript 常见类数组对象对比(附:具有默认迭代器的数据类型详解)
javascript·类数组对象
charlie1145141911 小时前
面向C++程序员的JavaScript 语法实战学习4
开发语言·前端·javascript·学习·函数
萌狼蓝天2 小时前
[Vue]性能优化:动态首行与动态列的匹配,表格数据格式处理性能优化
前端·javascript·vue.js·性能优化·ecmascript