前置開發(fā)環(huán)境

首先確保電腦已經(jīng)安裝node.js,vue.js，搜索cmd，以管理員身份運(yùn)行，

分別輸入以下命令，檢查環(huán)境配置是否成功；

node -v

npm -v

vue -V

如果輸出版本號，則說明環(huán)境配置成功，這里每個人安裝的版本可能不一樣；

創(chuàng)建一個Vue3項(xiàng)目

初始化Vue項(xiàng)目，在我們要創(chuàng)建Vue項(xiàng)目的地方打開cmd，執(zhí)行以下命令：

// demo為項(xiàng)目名
vue create demo

接著選擇創(chuàng)建項(xiàng)目的Vue配置信息，這里默認(rèn)是Vue3項(xiàng)目，這里我們選擇自定義配置，也可以直接創(chuàng)建vue3項(xiàng)目，跳過以下步驟

這里我選擇的是以下配置，按空格選擇，然后下一步

下一步，這里選擇3.X，如果你選擇 "Choose a version of Vue.js that you want to start the project with 3.x"，那么你的項(xiàng)目將基于 Vue.js 3.x 進(jìn)行開發(fā)。在項(xiàng)目的配置和代碼中，你將使用與 Vue.js 3.x 相關(guān)的特性、選項(xiàng)和 API。

這句話的意思是：是否使用歷史模式的路由器？（在生產(chǎn)環(huán)境中需要正確的服務(wù)器設(shè)置以支持索引回退）（Y/n），這里我選擇的是n,大家也可以根據(jù)自己的需要進(jìn)行選擇；

在 Vue.js 項(xiàng)目中，路由器可以使用歷史模式來實(shí)現(xiàn)無刷新的頁面導(dǎo)航。當(dāng)使用歷史模式時，瀏覽器不會發(fā)送標(biāo)準(zhǔn)的 GET 請求來加載新的頁面，而是通過瀏覽器的歷史記錄來進(jìn)行導(dǎo)航。

"Use history mode for router?" 詢問你是否要使用歷史模式的路由器。

"Requires proper server setup for index fallback in production" 表示在生產(chǎn)環(huán)境中需要正確的服務(wù)器設(shè)置以支持索引回退。這意味著在服務(wù)器端需要配置適當(dāng)?shù)囊?guī)則，以確保當(dāng)用戶在瀏覽器中輸入錯誤的 URL 或后退到不存在的頁面時，能夠正確地顯示默認(rèn)的索引頁面或提供適當(dāng)?shù)腻e誤提示。

"Y/n" 是一個提示，詢問你是否同意使用歷史模式的路由器。你可以選擇輸入 "Y" 表示同意，或者輸入 "N" 表示不同意。

如果你選擇 "Y"，那么 Vue.js 的路由器將使用歷史模式進(jìn)行導(dǎo)航，并在服務(wù)器端進(jìn)行適當(dāng)?shù)呐渲靡灾С炙饕赝?。這樣可以提供更好的用戶體驗(yàn)，特別是在單頁面應(yīng)用（SPA）中。

如果你不確定或不想使用歷史模式，或者你的服務(wù)器環(huán)境不支持或不需要特定的配置，你可以選擇輸入 "N"，然后 Vue.js 的默認(rèn)路由器模式將被使用。

這句話的意思是：選擇一個 CSS 預(yù)處理器（PostCSS、Autoprefixer 和 CSS Modules 默認(rèn)支持）。

在前端開發(fā)中，使用 CSS 預(yù)處理器可以提高開發(fā)效率和代碼的可維護(hù)性。這里提供了幾個常見的 CSS 預(yù)處理器供你選擇。

• PostCSS 是一個強(qiáng)大的工具，它可以對 CSS 進(jìn)行后處理，提供了豐富的插件生態(tài)系統(tǒng)，可用于自動添加瀏覽器前綴、優(yōu)化代碼、壓縮等功能。
• Autoprefixer 是 PostCSS 的一個插件，用于自動添加瀏覽器前綴，確保你的 CSS 在不同的瀏覽器中都能正確渲染。
• CSS Modules 是一種將 CSS 模塊化為獨(dú)立的模塊的方法，每個模塊具有唯一的類名，避免了全局樣式的沖突，并提高了代碼的復(fù)用性和可維護(hù)性。

這句話的意思是：選擇一個代碼風(fēng)格檢查器/格式化器的配置。

在軟件開發(fā)中，代碼風(fēng)格和格式的一致性非常重要。代碼風(fēng)格檢查器可以幫助你確保代碼遵循一定的規(guī)范和標(biāo)準(zhǔn)，提高代碼的可讀性和可維護(hù)性。而格式化器則可以自動調(diào)整代碼的格式，使其更加整潔和易讀。

這里提供了一些常見的代碼風(fēng)格檢查器/格式化器的配置供你選擇。

• "ESLint" 是一個廣泛使用的 JavaScript 代碼風(fēng)格檢查器，它可以檢查代碼中的語法錯誤、風(fēng)格問題等，并提供相應(yīng)的修復(fù)建議。
• "Prettier" 是一個強(qiáng)大的代碼格式化器，它可以根據(jù)你指定的配置對代碼進(jìn)行格式化，確保代碼風(fēng)格的一致性。
• "Stylelint" 是一個專門用于 CSS 和 Sass 代碼風(fēng)格檢查和格式化的工具。

在選擇額外的 Lint 功能時，推薦選擇 “Lint on save”。這個選項(xiàng)表示在保存文件時進(jìn)行代碼檢查，可以即時發(fā)現(xiàn)并修復(fù)代碼中的潛在問題，有助于保持代碼質(zhì)量和規(guī)范。因此，建議選擇此功能以確保代碼在保存時即時進(jìn)行Lint檢查。。

你可以使用空格鍵來選擇或取消選擇特定的檢查功能，使用 a 鍵來切換所有功能的選擇狀態(tài)，使用 i 鍵來反轉(zhuǎn)選擇狀態(tài)，然后按回車鍵繼續(xù)。

這句話的意思是：你更傾向于在哪里放置 Babel、ESLint 等的配置？

在軟件開發(fā)中，Babel 和 ESLint 等工具通常需要配置一些選項(xiàng)來滿足項(xiàng)目的需求。關(guān)于配置文件的放置位置，可以根據(jù)項(xiàng)目的結(jié)構(gòu)和團(tuán)隊(duì)的約定來決定。

這里提供了一些常見的放置位置供你選擇。

• "Inline" 表示將配置直接寫在代碼中，與代碼本身緊密結(jié)合。這種方式簡單直接，但不利于團(tuán)隊(duì)協(xié)作和代碼維護(hù)。
• "Project root" 意味著將配置文件放在項(xiàng)目的根目錄下。這樣可以方便地在整個項(xiàng)目中共享配置，并且易于管理。
• "Package.json" 是 Node.js 項(xiàng)目中常用的配置文件，你可以在其中添加 Babel 和 ESLint 的相關(guān)配置。這樣可以將配置與項(xiàng)目的依賴管理關(guān)聯(lián)起來。
• "VS Code workspace settings" 適用于使用 Visual Studio Code 作為開發(fā)工具的項(xiàng)目。你可以在 workspace settings 中設(shè)置特定的配置，以滿足項(xiàng)目的需求。

你可以使用箭頭鍵上下移動選擇你想要的配置放置位置，然后按回車鍵確認(rèn)選擇。

這里里是問你是否需要將剛才選擇的一系列配置保存起來，然后它可以幫你記住上面的一系列選擇，以便下次直接重用。

這里根據(jù)自己需要輸入 y 或者 n，我這里輸入 n 不需要。

接著點(diǎn)擊回車，開始創(chuàng)建項(xiàng)目

項(xiàng)目創(chuàng)建成功???????

引入cesium庫

打開VS code，打開我們剛剛創(chuàng)建的文件夾,點(diǎn)擊package.json，可以查看該項(xiàng)目的詳細(xì)信息

接著我們新建一個終端

輸入以下命令，引入cesiu庫，-D 是 --save-dev 的縮寫，這里我們將 Cesium 添加至開發(fā)時依賴即可。

npm install cesium -D

現(xiàn)在可以在這里看見cesium的版本號，說明我們已經(jīng)引入成功

修改項(xiàng)目配置

接下來修改配置文件，打開vue.config.js，修改為以下內(nèi)容

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
// CesiumJS源代碼的路徑
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    output: {
      sourcePrefix: ''
    },
    resolve: {
      fallback: { "https": false, "zlib": false, "http": false, "url": false },
    },
    plugins: [
      // 復(fù)制Cesium的Assets、Widgets和Workers到一個靜態(tài)目錄
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
          { from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }
        ]
      }),
      new webpack.DefinePlugin({
        //在Cesium中定義一個相對基本路徑來加載資源
        CESIUM_BASE_URL: JSON.stringify('')
      })
    ],
  }
})

接下來修改樣式，我們在src目錄下新建一個style文件夾，創(chuàng)建兩個樣式文件，一個是base.css，一個是index.css，

其中base.css用來書寫一些基礎(chǔ)通用的樣式，內(nèi)容如下

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

在index.css中引入我們剛剛建立的base.css樣式

@import './base.css';

然后我們在main.js中引入index.css

import './style/index.css'

獲取token

然后我們需要去cesium官網(wǎng)獲取一個token,https://cesium.com/，這里我已經(jīng)注冊過了，只需要輸入自己的郵箱按流程注冊即可

然后回到VS code，修改App.vue的內(nèi)容

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

<script>
import { onMounted } from 'vue';
import { Ion,Viewer } from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

Ion.defaultAccessToken = '這里替換為自己的token'

export default {
  name: 'App',
  setup() {
    onMounted(() => {
      const viewer = new Viewer('cesiumContainer', {
        animation:true, //是否打開創(chuàng)建動畫小控件，即左下角的儀表
        baseLayerPicker:true,//是否顯示圖層選擇器
        fullscreenButton:true,//是否顯示全屏按鈕
        geocoder:true,//是否顯示Geocoder(右上角的查詢按鈕)
        homeButton:true,//是否顯示Home按鈕
        infoBox: true,//是否顯示信息框
        sceneModePicker:true,//是否顯示三維地球/二維地圖選擇器
        selectionIndicator:true,//是否顯示選取指示器
        timeline: true, //是否關(guān)閉時間線
        navigationHelpButton: false, // 幫助提示
      });
      // 去除版權(quán)信息
      viewer._cesiumWidget._creditContainer.style.display = 'none';
    })
  }
}
</script>

<style scoped>
#cesiumContainer {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

運(yùn)行項(xiàng)目

最后在終端輸入以下命令

npm run serve

最終運(yùn)行效果如下

到此這篇關(guān)于Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Vue3 cesium環(huán)境搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論