vite+vue集成cesium

1、创建项目、选择框架vue+js

复制代码
pnpm create vite demo_cesium

2、进入项目安装依赖

复制代码
cd demo_cesium
pnpm install

3、安装cesium及插件

复制代码
3、pnpm i cesium vite-plugin-cesium

4、修改vite-config.js

复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()],
})

5、删除style.css,修改App.vue

复制代码
<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {
  Cesium.Ion.defaultAccessToken = '' //改为自己申请的token
  new Cesium.Viewer('cesiumContainer')   
})
</script>
<style scoped></style>

6、运行

复制代码
pnpm dev
相关推荐
CoolerWu20 小时前
TRAE SOLO实战成功展示&总结:一个所见即所得的笔记软体
前端·javascript
Cassie燁20 小时前
el-button源码解读1——为什么组件最外层套的是Vue内置组件Component
前端·vue.js
北极糊的狐20 小时前
Vue3 子组件修改父组件传递的对象并同步的方法汇总
前端·javascript·vue.js
Zyx200720 小时前
JavaScript 作用域与闭包(下):闭包如何让变量“长生不老”
javascript
u***j32420 小时前
JavaScript在Node.js中的进程管理
开发语言·javascript·node.js
用户479492835691520 小时前
javascript新进展你关注了吗:TC39 东京会议带来五大新特性
javascript
一 乐1 天前
餐厅管理智能点餐系统|基于java+ Springboot的餐厅管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端
北极糊的狐1 天前
父组件向子组件传参时,传递数组和对象类型的参数的方法
前端·javascript·vue.js
一颗不甘坠落的流星1 天前
【HTML】iframe 标签 allow 权限汇总(例如添加复制粘贴权限)
前端·javascript·html
forestsea1 天前
现代 JavaScript 加密技术详解:Web Crypto API 与常见算法实践
前端·javascript·算法