一. 启动一个vue项目

1. 安装vite脚手架

首先，确保你已经安装了 Node.js。然后通过以下命令全局安装 Vite：

npm install -g create-vite

创建一个新的 Vite 项目：

create-vite my-cesium-project

进入项目目录：

cd my-cesium-project
pnpm install

2.安装Cesium和Cesium插件

tips:由于在 Vite 项目中使用 Cesium 时，Vite 需要一个特定的插件来处理 Cesium 的导入。可以尝试安装 vite-plugin-cesium 插件来解决这个问题。

pnpm i cesium vite-plugin-cesium 

3.配置 Vite 插件

在项目根目录下创建一个 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()  //这个
],
})

4. 创建 Cesium 组件和渲染Cesium 组件

在 Vite 项目中创建一个 Cesium 组件，用于加载和显示 Cesium 地图。在 src/components 目录下创建一个 CesiumMap.vue 文件，并添加以下内容：

<template>
  <div ref="cesiumContainer" style="width: 100%; height: 90vh"></div>
</template>
  
  <script setup>
import * as Cesium from "cesium";
import { onMounted,onBeforeUnmount, ref } from "vue";

const cesiumContainer = ref(null);

onMounted(() => {
	// 到 https://ion.cesium.com/tokens?page=1 申请一个token
    Cesium.Ion.defaultAccessToken = 'xxxx';

  const viewer = new Cesium.Viewer(cesiumContainer.value);
});
onBeforeUnmount(() => {
  viewer.destroy();
});
</script>
  

在 src/App.vue 文件中引入并使用 CesiumMap 组件：

<template>
  <div id="app">
    <CesiumMap />
  </div>
</template>

<script setup>
import CesiumMap from './components/CesiumMap.vue';
</script>

5. 启动项目

现在你可以运行 Vite 项目查看 Cesium 地图了：

pnpm run dev

启动成功的控制台:

应该看到的界面是:

OK!成功了!

二. 其他脚手架(基本同理)-待续