第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境

从0开始的Cesium

第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境

---

第一步：使用Vite创建一个Vue项目

1. 创建Vue项目

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

2. 安装依赖

1.cd cesiumapp
2.npm/yarn install
3.yarn dev/npm run dev

第二步：安装Cesium插件

yarn add cesium vite-plugin-cesium vite -D

第三步：在vue.config.js中引入Cesium

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'; // 引入插件
export default defineConfig({
  plugins: [vue(), cesium()],
});

第四步：在App.vue中初始化Cesium场景

<template>
  <div id="cesiumContainer"></div>
</template>


<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";

onMounted(() => {
  //初始化cesium实例
  const viewer = new Cesium.Viewer("cesiumContainer");
});
</script>

<style>
#cesiumContainer {
  width: 100%;
  height: 500px;
}
</style>

---