Vite Vue项目加载Cesium模块

1 创建项目

选择一个文件夹，打开PowerShell，输入

yarn create vite

根据提示选择项目名称和使用语言（这里选用Vue + ts）。
进入刚刚创建的文件夹，重新打开PowerShell，输入：

yarn add cesium

待命令执行完成之后，输入

yarn run dev

即可预览项目。

2 配置Cesium

Vite项目配置Cesium支持非常简单，只需要在index.html 中引入Cesium的样式表和脚本即可。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><link rel="stylesheet" href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css"><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script><script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script></body>
</html>

3 创建组件

新建文件./src/components/CesiumMap.vue，简单的组件格式如下：

<template><div class="container"><h1>Cesium Map</h1><div id="cesiumContainer"></div></div>
</template><script lang="ts">
import * as Cesium from 'cesium';export default {name: "CesiumMap",mounted() {// Initialize the Cesium Viewer in the HTML element with the "cesiumContainer" ID.const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain()});// Add Cesium OSM Buildings, a global 3D buildings layer.const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());// Fly the camera to San Francisco at the given longitude, latitude, and height.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-15.0),}});}}</script><style scoped>
.container {width: 100%;height: 100vh;
}
#cesiumContainer {width: 100%;height: 100vh;
}
</style>

4 使用组件

Vite项目对组件的使用方式也大大简化，只需要在脚本区引入组件，然后在模板区使用即可。
下面是App.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import CesiumMap from "./components/CesiumMap.vue";
</script><template><CesiumMap></CesiumMap><img alt="Vue logo" src="./assets/logo.png" /><HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /></template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

Vite Vue项目加载Cesium模块相关推荐

总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html.main.js.App.vue.index ...
Vue项目加载过慢优化研究
近日研究了一下公司vue项目加载过慢问题,首次打开速度要15秒,经过研究,从两方面着手,最终使项目速度降到了3秒一.通过过gzip加载参考文章: 一.webpack优化之Gzip(vue) - 简 ...
vue 项目加载顺序_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
nginx部署vue项目加载资源慢优化方案
目录 1.问题 2.解决方案推荐gzip压缩解压 2.1 vue项目的配置文件中加如下配置 2.3 nginx服务器配置 1.问题当我采用nginx部署了vue的项目后发现第一次访问网站需要1分左右 ...
vue项目加载不出图片解决方式
vue项目中图片加载不出来,像下面这样,图片地址是有的. 解决方案: 1.在html5或jsp的header加入meta. 找到index.html文件.在head中添加如下代码. <meta ...
vue项目加载慢，Nginx页面优化
优化的思路: F12调起调试模式,查看js和css加载所需时间(注意由于资源过大导致的加载过慢), 下图是经过压缩后的,压缩前chunk-vendors.js我的接近10M,加载几十毫秒. 如果部署在 ...
Vite 配置 cdn 加载资源
一.介绍上篇文章我们从零配置 Vite + Vue3.0 开发环境.生产环境,本篇文章我们配置 CDN 加载.因为 Vite 不会重写从外部文件导入的内容,我们需要使用支持 ESM 编译的 CDN. ...
初级前端小程序项目加载速度优化
这份文字是根据近期团队做来问丁香医生 SPA 和丁香医生小程序加载速度优化的经历整理而成. 效果古人有一句话叫做:治感冒看疗效.既然是关于速度优化的,我们就先来看一下优化的效果. 来问丁香医生 ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
es6 循环加载ES6模块
循环加载ES6模块 "循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本. // a.js var b = requir ...