免费网站模板 下载,淘客网站怎么做代理,下载官方网站app,网站seo月报一、创建Vue工程npm init vuelatest二、安装依赖Sassnpm install sass -D解决初始cesium无法全屏#xff0c;主要是替换文件 Cesiumnpm install cesiumvite-plugin-cesiumnpm install vite-plugin-cesium -Dvite-plugin-cesium 是一个专为 Vite 项目设计的插件#xff0c;用于…一、创建Vue工程
npm init vuelatest二、安装依赖Sass
npm install sass -D解决初始cesium无法全屏主要是替换文件 Cesium
npm install cesium vite-plugin-cesium
npm install vite-plugin-cesium -Dvite-plugin-cesium 是一个专为 Vite 项目设计的插件用于简化在 Vue.js 应用中集成 Cesium 的过程。它通过自动配置 Cesium 的资源路径和引入方式使得开发者可以快速启动并使用 Cesium 进行 3D 地图和地球场景的开发。 三、文件main.scss
body {margin: 0;background-color: #f5f5f5;
}/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {transition: all 0.3s;
}.fade-slide-enter-from {transform: translateX(-30px);opacity: 0;
}.fade-slide-leave-to {transform: translateX(30px);opacity: 0;
}Home.vue
script setup
import { onMounted } from vue
import cesium/Build/Cesium/Widgets/widgets.css
import * as Cesium from cesium
const Cesium_ACCESS_TOKEN ....
Cesium.Ion.defaultAccessToken Cesium_ACCESS_TOKEN
onMounted(() {const viewer new Cesium.Viewer(cesiumContainer);
})
/script
templatediv idcesiumContainer/div
/template
style
#cesiumContainer {width: 100vw;height: 100vh;
}
/styletoken获取 App.vue
script setup
import HomeVue from ./views/Home.vue;
/scripttemplate
HomeVue/
/templatestyle scoped/stylevite.config.js配置cesium
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue
import vueDevTools from vite-plugin-vue-devtools
import cesium from vite-plugin-cesium// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),cesium()],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))},},
})
文件分布 四、结果
