1. 軟件下載與安裝
? ? ? ?1. node安裝
Vue.js 的開發依賴于 Node.js 環境，因此我們首先需要安裝 Node.js。Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境，它允許你在服務器端運行 JavaScript 代碼，同時也為前端開發提供了強大的工具支持。
?官網下載 Node.js，Node.js 中文網地址：下載 | Node.js 中文網?。在下載頁面中，你可以根據自己的系統版本選擇合適的安裝包。一般來說，推薦下載最新版本的 Node.js，以確保你能夠使用最新的特性和功能。
?安裝比較簡單，可以參考：node安裝步驟，完成node安裝，下載安裝完成后
?2. 檢查是否安裝成功
??打開window+r快捷鍵打開，輸入cmd，回車，然后輸入node -v命令
安裝成功顯示node版本
node -v
?2. 介紹npm、cnpm、yarn、pnpm
? ?1.npm
? ? npm是?node.js?的模塊依賴管理工具
? ?常見場景：
- 允許用戶從 npm 服務器下載別人編寫的第三方包到本地使用。
- 允許用戶從 npm 服務器下載并安裝別人編寫的命令行程序到本地使用。
- 允許用戶將自己編寫的包或命令行程序上傳到 npm 服務器供別人使用。
? 2. cnpm
使用 npm 安裝包時，需要去 npm 倉庫獲取，而 npm 倉庫在國外，很不穩定，有時獲取會失敗。淘寶搭建了一個國內npm服務器，會定時拉取國外npm倉庫內容，把國外的搬運到國內。
設置使用淘寶鏡像
npm install -g cnpm --registry=http://registry.npmmirror.com?檢查是否安裝成功：cnpm -v 安裝成功后，后續用npm還是使用cnpm安裝都可以。如下圖：cnpm安裝成功
? ? ?3. yarn
官網：yarn - npm
- 快速：Yarn緩存了它下載的每個包，所以它再也不需要下載同一個包了。它還幾乎同時執行所有操作，以最大限度地提高資源利用率。這意味著安裝速度更快。
- 可靠：使用詳細但簡潔的鎖定文件格式和確定性的安裝操作算法，Yarn能夠保證在一個系統上運行的任何安裝在另一個系統上將完全相同。
- 安全：在執行代碼之前，Yarn使用校驗和來驗證每個安裝包的完整性安裝
安裝yarn?
npm install --global yarn?查看版本
yarn --versionyarn 是用 yarn add 代替 npm install
yarn remove 代替 npm uninstall
安裝依賴模塊yarn add [package]yarn add [package]@[version]yarn add [package]@[tag]
刪除依賴模塊：yarn remove [package]
更新依賴模塊yarn upgrade [package]yarn upgrade [package]@[version]yarn upgrade [package]@[tag]
配置源。yarn默認的源地址：https://registry.yarnpkg.com ，如果下載太慢，可以修改源
查看鏡像源：yarn config get registry
綁定鏡像源：yarn config set registry https://registry.npmmirror.com
刪除鏡像源（注意這里是 delete）：yarn config delete registry
? ? ?4. pnpm
pnpm 由 npm/yarn 衍生而來，解決了 npm/yarn 內部潛在的 bug，極大的優化了性能，擴展了使用場景。被譽為 最先進的包管理工具。
安裝pnpm
npm install -g pnpm?pnpm add 安裝軟件包及其依賴的任何軟件包。默認情況下，任何新軟件包都安裝為生產依賴項。
pnpm add sax # 保存到 dependencies
pnpm add -D sax # 保存到 devDependencies
pnpm add -O sax # 保存到 optionalDependencies
pnpm add -g sax # 安裝包到全局
pnpm add sax@next #從 next 標簽下安裝
pnpm add sax@3.0.0 #安裝指定版本 3.0.0
2. 創建vue3項目
1. 使用 Vue CLI 創建 Vue 3 項目
這里用cnpm作為演示案列，也可以使用yarn、pnpm等管理工具。
1. 安裝 Vue CLI
如果你還沒有安裝 Vue CLI，可以通過 npm（Node Package Manager）來安裝。打開終端或命令提示符并運行：
npm install -g @vue/cli?2. 創建項目
vue create my-vue-project?在提示中選擇 Vue 3 的配置。Vue CLI 會讓你選擇一系列預設，你可以選擇手動選擇特性，然后確保選擇了 Vue 3。
3. 進入項目?
cd my-vue-project?4. 安裝依賴包
cnpm install
5. 運行項目
cnpm run dev?2. 使用Vite創建Vue3項目
1.全局安裝Vite
cnpm install -g create-vite2. 創建項目
cnpm create vite@latest my-vue-project -- --template vue?3.進入項目、安裝依賴、運行項目
? ? ? ? 如使用Vue Cli安裝3、4、5步驟一樣
3. 通過命令下載cesium
通過命令下載Cesium和Plugin
cnpm install cesium cnpm install vite-plugin-cesium -D?vite.config.js配置如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import path from 'path';
import cesium from 'vite-plugin-cesium';export default defineConfig({plugins: [vue(),cesium()]
})4. 在組件中使用cesium
import * as Cesium from "cesium";?設置容器
<template><div class="cesium" id="cesiumContainer" style="width: 100%;height: 100vh;"></div>
</template>?初始化cesium地圖：
const cesiumConfig = {// 主頁按鈕homeButton: false,// 場景模式選擇器sceneModePicker: false,// 全屏按鈕fullscreenButton: false,// 是否顯示點擊要素之后顯示的信息infoBox: false,// 要素選中框selectionIndicator: false,// 影像切換baseLayerPicker: false,// 啟用了陰影效果shadows: true,// 啟用動畫shouldAnimate: true,// 是否顯示動畫控件animation: false,// 是否顯示時間線控件timeline: false,// 是否顯示地名查找控件geocoder: false,// 是否顯示幫助信息控件navigationHelpButton: false,contextOptions: {contextType: 2, // Webgl2:2 ; WebGPU:3},// 版權信息creditContainer: document.createElement('div')} viewer = new Cesium.Viewer('cesiumContainer',cesiumConfig)?全部代碼：
<template><div class="cesium" id="cesiumContainer" style="width: 100%;height: 100vh;"></div>
</template><script setup>import {onMounted} from "vue";import * as Cesium from "cesium";let viewer;Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MGQ2MGRkYS1lNDAzLTRmNjEtOGQ3ZC0xOGE2NmZhMmRhMDgiLCJpZCI6NjgzNTYsImlhdCI6MTc0NzM2MjY1OH0.flKVgGOtDCPSQc2OaWX0lyW7YblQPwFQyHduDn3_Igo';const cesiumConfig = {// 主頁按鈕homeButton: false,// 場景模式選擇器sceneModePicker: false,// 全屏按鈕fullscreenButton: false,// 是否顯示點擊要素之后顯示的信息infoBox: false,// 要素選中框selectionIndicator: false,// 影像切換baseLayerPicker: false,// 啟用了陰影效果shadows: true,// 啟用動畫shouldAnimate: true,// 是否顯示動畫控件animation: false,// 是否顯示時間線控件timeline: false,// 是否顯示地名查找控件geocoder: false,// 是否顯示幫助信息控件navigationHelpButton: false,contextOptions: {contextType: 2, // Webgl2:2 ; WebGPU:3},// 版權信息creditContainer: document.createElement('div')}const initMap = () => {viewer = new Cesium.Viewer('cesiumContainer',cesiumConfig)}onMounted(() => {initMap();})
</script><style lang="less" scoped></style>?運行項目，效果如下：
參考資料如下：
node包管理工具：npm、pnpm、cnpm、npx、yarn?https://blog.csdn.net/freeking101/article/details/109821916
cesium Vue3 從創建到添加天地圖? ??Cesium 入門教程（基于 vue3）-騰訊云開發者社區-騰訊云
)
)