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
相关推荐
运维@小兵2 小时前
vue开发用户注册功能
前端·javascript·vue.js
m0_616188494 小时前
使用vue3-seamless-scroll实现列表自动滚动播放
开发语言·javascript·ecmascript
香蕉可乐荷包蛋4 小时前
vue数据可视化开发echarts等组件、插件的使用及建议-浅看一下就行
vue.js·信息可视化·echarts
老马啸西风4 小时前
sensitive-word-admin v2.0.0 全新 ui 版本发布!vue+前后端分离
vue.js·ui·ai·nlp·github·word
湛海不过深蓝5 小时前
【ts】defineProps数组的类型声明
前端·javascript·vue.js
layman05285 小时前
vue 中的数据代理
前端·javascript·vue.js
layman05286 小时前
vue中理解MVVM
前端·javascript·vue.js
一舍予7 小时前
八股文-js篇
开发语言·前端·javascript
鸡鸭扣7 小时前
DRF/Django+Vue项目线上部署:腾讯云+Centos7.6(github的SSH认证)
前端·vue.js·python·django·腾讯云·drf
Edward Nygma8 小时前
springboot3+vue3融合项目实战-大事件文章管理系统-更新用户密码
android·开发语言·javascript