国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<p id="fh9oo"><strike id="fh9oo"></strike></p>

在vite創(chuàng)建的vue3項(xiàng)目中使用Cesium加載czml路徑信息和無(wú)人機(jī)模型

2年前作者：BreezeChasingDrizzle分類：Toy博客閱讀(24)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了在vite創(chuàng)建的vue3項(xiàng)目中使用Cesium加載czml路徑信息和無(wú)人機(jī)模型。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

在vite創(chuàng)建的vue3項(xiàng)目中使用Cesium加載czml路徑信息和無(wú)人機(jī)模型

用到的區(qū)域文件、地圖標(biāo)記文件、路徑信息文件、模型文件提取碼：99jq

使用vite創(chuàng)建vue3項(xiàng)目
```
npm create vite@latest
```
cd到創(chuàng)建的項(xiàng)目文件夾中
```
npm install
```
安裝Cesium
```
npm i cesium vite-plugin-cesium vite -D
```

配置

vite.config.js文件：添加Cesium并設(shè)置反向代理實(shí)現(xiàn)跨域。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [vue(), cesium()],
  //設(shè)置反向代理，跨域
  server: {
    proxy: {
      '/ArcGIS': {
        target: 'https://services.arcgisonline.com',//代理的地址
        changeOrigin: true,
      }
    }
  }
});

style.css(可選)：修改#app樣式

#app {
		  max-width: 100%;
		  margin: 0 auto;
		  padding: 2rem;
		  text-align: center;
		}

代碼

App.vue

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

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(async () => {

  // 相當(dāng)于密鑰，申請(qǐng)使用下邊鏈接中的數(shù)據(jù)時(shí)需要用到
  Cesium.Ion.defaultAccessToken = '你的token';
  Cesium.ArcGisMapService.defaultAccessToken = '你的token';


  let viewer = new Cesium.Viewer('cesiumContainer', {
    // 防止報(bào)錯(cuò) 但是加上之后點(diǎn)物體就不會(huì)彈窗顯示信息了
    infoBox: false,
    // 去掉右上角的一個(gè)小選項(xiàng)卡
    baseLayerPicker: false,
    // 加載世界街道地圖的底圖
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(
      Cesium.ArcGisMapServerImageryProvider.fromUrl("/ArcGIS/rest/services/World_Street_Map/MapServer")
    ),
    // 三維立體效果、水波紋
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestVertexNormals: true,
      requestWaterMask: true
    })
  });

  viewer.camera.setView({
    // 初始的相機(jī)的定位 定在紐約
    destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
    // 方向 俯仰
    orientation: {
      heading: 0.6,
      pitch: -0.66
    }
  });

  // 添加紐約建筑模型
  let city = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(75343)
  );

  // 定義建筑的3D樣式 層次分明
  city.style = new Cesium.Cesium3DTileStyle({
    color: {
      // 條件判斷建筑具體的顏色
      conditions: [
        ['${Height} >= 300', 'rgba(45,0,75,0.5)'],
        ['${Height} >= 200', 'rgb(102,71,151)'],
        ['${Height} >= 100', 'rgba(170,162,204,0.5)'],
        ['${Height} >= 50', 'rgba(224,226,238,0.5)'],
        ['${Height} >= 25', 'rgba(252,230,200,0.5)'],
        ['${Height} >= 10', 'rgba(248,176,87,0.5)'],
        ["true", 'rgb(127,59,8)']
      ]
    }
  })


  // 鄰域邊界的加載
  let neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./assets/SampleData/sampleNeighborhoods.geojson');
  // 貼在地圖表面
  neighborhoodsPromise.then((dataSource) => {
    // 將數(shù)據(jù)添加到查看器
    viewer.dataSources.add(dataSource);
    // 把數(shù)據(jù)進(jìn)行著色的調(diào)整以及放到地圖的表面
    // 拿到區(qū)域的實(shí)例  Get the array of entities
    let neighborhoodsEntities = dataSource.entities.values;
    for (let i = 0; i < neighborhoodsEntities.length; i++) {
      let entity = neighborhoodsEntities[i];
      // 判斷存不存在相應(yīng)的圖形
      if (Cesium.defined(entity.polygon)) {
        entity.name = entity.properties.neighborhood;
        // 設(shè)置多邊形顏色
        entity.polygon.material = Cesium.Color.fromRandom({
          red: 0.1,
          maximumGreen: 0.5,
          minimumBlue: 0.5,
          alpha: 0.6
        });
        // 設(shè)置地形著色
        entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
        // 設(shè)置位置 貼到多邊形最底下
        // 生成多邊形中心
        let polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
        // 橢球體
        entity.position = Cesium.Ellipsoid.WGS84.scaleToGeocentricSurface(
          // 邊界球
          Cesium.BoundingSphere.fromPoints(polyPositions).center
        );

        // 生成標(biāo)簽
        entity.label = {
          text: entity.name,
          showBackground: true,
          scale: 0.6,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // 設(shè)置顯示的距離范圍
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10, 8000),
          // 禁用的距離
          disableDepthTestDistance: 100
        }
      }
    }
  });

  // 地圖標(biāo)記顯示
  let kmloptions = {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
    // 如果我們想要將幾何特征（多邊形、線串和線性環(huán)）固定在地面上，則為true
    clampToGround: true
  };
  // KML文件時(shí)谷歌公司創(chuàng)建的一個(gè)地標(biāo)性文件，用于記錄某一地點(diǎn)、或者連續(xù)地點(diǎn)的時(shí)間、經(jīng)緯度、海拔等地理信息數(shù)據(jù)
  let geoCachePromise = Cesium.KmlDataSource.load('./assets/SampleData/sampleGeocacheLocations.kml', kmloptions);
  // 將geocache廣告牌實(shí)體添加到場(chǎng)景中并為其設(shè)置樣式
  geoCachePromise.then((dataSource) => {
    // console.log(dataSource)
    // 將新數(shù)據(jù)作為實(shí)體添加到查看器
    viewer.dataSources.add(dataSource);
    // 獲取實(shí)體數(shù)組
    let geoCacheEntities = dataSource.entities.values;

    for (let i = 0; i < geoCacheEntities.length; i++) {
      let entity = geoCacheEntities[i];
      if (Cesium.defined(entity.billboard)) {
        // 調(diào)整垂直原點(diǎn)，使圖釘位于地形上
        entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
        entity.billboard.image = '/assets/tagpark.png';
        // 禁用標(biāo)簽以減少混亂
        entity.label = undefined;
        // 添加距離現(xiàn)實(shí)條件
        entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10, 20000);
        // 以度為單位計(jì)算經(jīng)度和緯度
        let cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
        let latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
        let longtitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
        // 修改描述
        let description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
          '<tr><th>' + "longtitude" + '</th><td>' + longtitude.toFixed(5) + '</td></tr>' +
          '<tr><th>' + "latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
          '<tr><th>' + "實(shí)時(shí)人流" + '</th><td>' + Math.floor(Math.random() * 20000) + '</td></tr>' +
          '<tr><th>' + "安全等級(jí)" + '</th><td>' + Math.floor(Math.random() * 5) + '</td></tr>' +
          '</tbody></table>';
        entity.description = description;
      }
    }
  })

  // 從czml文件中加載飛行路徑
  let dronePromise = Cesium.CzmlDataSource.load('./assets/SampleData/sampleFlight.czml');
  // 無(wú)人機(jī)實(shí)體
  dronePromise.then((dataSource) => {
    // 添加獲取到的實(shí)體數(shù)據(jù)
    viewer.dataSources.add(dataSource);
    // 通過(guò)ID獲取軌跡的實(shí)體
    let drone = dataSource.entities.getById('Aircraft/Aircraft1');
    // 設(shè)置無(wú)人機(jī)實(shí)體的模型
    drone.model = {
      // CesiumDrone.gltf會(huì)報(bào)錯(cuò)
      // uri:'./assets/SampleData/Models/CesiumDrone.gltf',

      uri: './assets/SampleData/Models/Cesium_Air.glb',
      // uri:'./assets/SampleData/Models/ferrari2.gltf',
      // 設(shè)置模型最小的時(shí)候的像素大小 縮小地球的時(shí)候也能看到
      minimumPixelSize: 128,
      // 設(shè)置最大規(guī)格
      maximumScale: 500,
      // 輪廓的顏色屬性
      silhouetteColor: Cesium.Color.WHITE,
      // 指定輪廓的大小
      silhouetteSize: 0
    }
    // 設(shè)置無(wú)人機(jī)的方向 角度
    drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
    // 設(shè)置當(dāng)前所在的具體的位置
    drone.viewFrom = new Cesium.Cartesian3(0, -30, 30);
    // 設(shè)置動(dòng)起來(lái)
    viewer.clock.shouldAnimate = true;
  })
})
</script>

<style>
html,
body,
#app,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

解讀

加載token

// 相當(dāng)于密鑰，申請(qǐng)使用下邊鏈接中的數(shù)據(jù)時(shí)需要用到
Cesium.Ion.defaultAccessToken = '你的token';
Cesium.ArcGisMapService.defaultAccessToken = '你的token';

創(chuàng)建查看器viewer，加載世界街道地圖，注意vite.config.js中配合的跨域。

  let viewer = new Cesium.Viewer('cesiumContainer', {
    // 防止報(bào)錯(cuò)
    infoBox: false,
    // 去掉右上角的一個(gè)小選項(xiàng)卡
    baseLayerPicker: false,
    // 加載世界街道地圖的底圖
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(
      Cesium.ArcGisMapServerImageryProvider.fromUrl("/ArcGIS/rest/services/World_Street_Map/MapServer")
    ),
    // 三維立體效果、水波紋
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestVertexNormals: true,
      requestWaterMask: true
    })
  });

初始化相機(jī)位置

viewer.camera.setView({
    // 初始的相機(jī)的定位 定在紐約
    destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
    // 方向 俯仰
    orientation: {
      heading: 0.6,
      pitch: -0.66
    }
  });

添加紐約建筑模型并設(shè)置建筑顏色樣式

// 添加紐約建筑模型
  let city = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(75343)
  );

  // 定義建筑的3D樣式 層次分明
  city.style = new Cesium.Cesium3DTileStyle({
    color: {
      // 條件判斷建筑具體的顏色
      conditions: [
        ['${Height} >= 300', 'rgba(45,0,75,0.5)'],
        ['${Height} >= 200', 'rgb(102,71,151)'],
        ['${Height} >= 100', 'rgba(170,162,204,0.5)'],
        ['${Height} >= 50', 'rgba(224,226,238,0.5)'],
        ['${Height} >= 25', 'rgba(252,230,200,0.5)'],
        ['${Height} >= 10', 'rgba(248,176,87,0.5)'],
        ["true", 'rgb(127,59,8)']
      ]
    }
  })

劃分城市區(qū)域并著色

// 鄰域邊界的加載
  let neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./assets/SampleData/sampleNeighborhoods.geojson');
  // 貼在地圖表面
  neighborhoodsPromise.then((dataSource) => {
    // 將數(shù)據(jù)添加到查看器
    viewer.dataSources.add(dataSource);
    // 把數(shù)據(jù)進(jìn)行著色的調(diào)整以及放到地圖的表面
    // 拿到區(qū)域的實(shí)例  Get the array of entities
    let neighborhoodsEntities = dataSource.entities.values;
    for (let i = 0; i < neighborhoodsEntities.length; i++) {
      let entity = neighborhoodsEntities[i];
      // 判斷存不存在相應(yīng)的圖形
      if (Cesium.defined(entity.polygon)) {
        entity.name = entity.properties.neighborhood;
        // 設(shè)置多邊形顏色
        entity.polygon.material = Cesium.Color.fromRandom({
          red: 0.1,
          maximumGreen: 0.5,
          minimumBlue: 0.5,
          alpha: 0.6
        });
        // 設(shè)置地形著色
        entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
        // 設(shè)置位置 貼到多邊形最底下
        let polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
        entity.position = Cesium.Ellipsoid.WGS84.scaleToGeocentricSurface(
          Cesium.BoundingSphere.fromPoints(polyPositions).center
        );

        // 生成標(biāo)簽
        entity.label = {
          text: entity.name,
          showBackground: true,
          scale: 0.6,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // 設(shè)置顯示的距離范圍
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10, 8000),
          // 禁用的距離
          disableDepthTestDistance: 100
        }
      }
    }
  })

利用KML文件實(shí)現(xiàn)在地圖上標(biāo)記地點(diǎn)

// 地圖標(biāo)記顯示
  let kmloptions = {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
    // 如果我們想要將幾何特征（多邊形、線串和線性環(huán)）固定在地面上，則為true
    clampToGround: true
  };
  // KML文件時(shí)谷歌公司創(chuàng)建的一個(gè)地標(biāo)性文件，用于記錄某一地點(diǎn)、或者連續(xù)地點(diǎn)的時(shí)間、經(jīng)緯度、海拔等地理信息數(shù)據(jù)
  let geoCachePromise = Cesium.KmlDataSource.load('./assets/SampleData/sampleGeocacheLocations.kml', kmloptions);
  // 將geocache廣告牌實(shí)體添加到場(chǎng)景中并為其設(shè)置樣式
  geoCachePromise.then((dataSource) => {
    // console.log(dataSource)
    // 將新數(shù)據(jù)作為實(shí)體添加到查看器
    viewer.dataSources.add(dataSource);
    // 獲取實(shí)體數(shù)組
    let geoCacheEntities = dataSource.entities.values;

    for (let i = 0; i < geoCacheEntities.length; i++) {
      let entity = geoCacheEntities[i];
      if (Cesium.defined(entity.billboard)) {
        // 調(diào)整垂直原點(diǎn)，使圖釘位于地形上
        entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
        entity.billboard.image = '/assets/tagpark.png';
        // 禁用標(biāo)簽以減少混亂
        entity.label = undefined;
        // 添加距離現(xiàn)實(shí)條件
        entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10, 20000);
        // 以度為單位計(jì)算經(jīng)度和緯度
        let cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
        let latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
        let longtitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
        // 修改描述
        let description = '<table class="Cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
          '<tr><th>' + "longtitude" + '</th><td>' + longtitude.toFixed(5) + '</td><tr>' +
          '<tr><th>' + "latitude" + '</th><td>' + latitude.toFixed(5) + '</td><tr>' +
          '<tr><th>' + "實(shí)時(shí)人流" + '</th><td>' + Math.floor(Math.random() * 20000) + '</td><tr>' +
          '<tr><th>' + "安全等級(jí)" + '</th><td>' + Math.floor(Math.random() * 5) + '</td><tr>' +
          '</tbody><table>';
        entity.description = description;
      }
    }
  })

加載飛行路徑和飛機(jī)模型

  // 從czml文件中加載飛行路徑
  let dronePromise = Cesium.CzmlDataSource.load('./assets/SampleData/sampleFlight.czml');
  // 無(wú)人機(jī)實(shí)體
  dronePromise.then((dataSource) => {
    // 添加獲取到的實(shí)體數(shù)據(jù)
    viewer.dataSources.add(dataSource);
    // 通過(guò)ID獲取軌跡的實(shí)體
    let drone = dataSource.entities.getById('Aircraft/Aircraft1');
    // 設(shè)置無(wú)人機(jī)實(shí)體的模型
    drone.model = {
      // CesiumDrone.gltf會(huì)報(bào)錯(cuò)
      // uri:'./assets/SampleData/Models/CesiumDrone.gltf',

      uri: './assets/SampleData/Models/Cesium_Air.glb',
      // uri:'./assets/SampleData/Models/ferrari2.gltf',
      // 設(shè)置模型最小的時(shí)候的像素大小 縮小地球的時(shí)候也能看到
      minimumPixelSize: 128,
      // 設(shè)置最大規(guī)格
      maximumScale: 500,
      // 輪廓的顏色屬性
      silhouetteColor: Cesium.Color.WHITE,
      // 指定輪廓的大小
      silhouetteSize: 0
    }
    // 設(shè)置無(wú)人機(jī)的方向 角度
    drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
    // 設(shè)置當(dāng)前所在的具體的位置
    drone.viewFrom = new Cesium.Cartesian3(0, -30, 30);
    // 設(shè)置動(dòng)起來(lái)
    viewer.clock.shouldAnimate = true;
  })

效果：npm run dev 運(yùn)行

在vite創(chuàng)建的vue3項(xiàng)目中使用Cesium加載czml路徑信息和無(wú)人機(jī)模型,Cesium學(xué)習(xí),vue.js,Cesium 文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-561864.html

到了這里，關(guān)于在vite創(chuàng)建的vue3項(xiàng)目中使用Cesium加載czml路徑信息和無(wú)人機(jī)模型的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

在vite+vue3項(xiàng)目中配置使用css預(yù)處理器（less/sass）以及路徑別名
vite已經(jīng)將這些預(yù)處理器的loader內(nèi)置了，我們不用再像在webpack項(xiàng)目中那樣，需要下載和配置一堆相關(guān)的loader，我們只需要下載less，sass依賴，就能直接在項(xiàng)目中使用啦使用npm或者yarn來(lái)安裝以下依賴： Less預(yù)處理器： npm install -D less Sass預(yù)處理器： npm install -D sass 如圖，下載之后
2024年02月11日
瀏覽(42)
vite創(chuàng)建vue3項(xiàng)目
這種方式創(chuàng)建的項(xiàng)目最快捷，因?yàn)榛疽蕾嚩佳b好了這種方式會(huì)基于模板創(chuàng)建項(xiàng)目，對(duì)于官方模板vue-ts，只帶有基礎(chǔ)的vue和ts，不帶有vue-router、pinia等以上命令中，\\\"vue-ts\\\"是模板名稱或者使用以下命令然后勾選模板來(lái)創(chuàng)建項(xiàng)目這種方式創(chuàng)建的項(xiàng)目甚至連vite.config.ts都沒(méi)有，如
2024年02月05日
瀏覽(27)
vite 創(chuàng)建vue3項(xiàng)目，使用 Prettier 統(tǒng)一格式化代碼，集成 ESLint、Stylelint 代碼校驗(yàn)規(guī)范
在團(tuán)隊(duì)開(kāi)發(fā)中，保持代碼風(fēng)格的一致性和代碼質(zhì)量的高度，對(duì)于項(xiàng)目的可維護(hù)性和可讀性非常重要。為了實(shí)現(xiàn)這一目標(biāo)，我們可以使用工具來(lái)自動(dòng)格式化代碼并進(jìn)行代碼校驗(yàn)，在開(kāi)發(fā)過(guò)程中捕獲潛在的問(wèn)題，并提供修復(fù)建議。本示例中，我們將使用 Vite 來(lái)創(chuàng)建一個(gè)新的 Vue
2024年04月28日
瀏覽(24)
使用模板創(chuàng)建【vite+vue3+ts】項(xiàng)目出現(xiàn) “找不到模塊‘vue‘或其相應(yīng)的類型聲明” 的解決方案
項(xiàng)目前臺(tái)需要使用Vue3+Ts來(lái)寫一個(gè)H5應(yīng)用，然后我用模板創(chuàng)建創(chuàng)建完后進(jìn)入 HelloWorld.vue ，兩眼一黑然后在 tsconfig.json 的 \\\"compilerOptions\\\" 中添加修改 \\\"moduleResolution\\\" 值為 \\\"node\\\"
2024年02月17日
瀏覽(26)
vue3創(chuàng)建項(xiàng)目，vite+js
之前的時(shí)候大哥就讓我自己搭架子，但是我拖延癥，現(xiàn)在用到了，得自己搭了我的項(xiàng)目都放到了 VuePorjects這個(gè)目錄里面，一、先進(jìn)入到指定工作目錄，（不是你要?jiǎng)?chuàng)建的項(xiàng)目的名稱哈）二、創(chuàng)建vue3項(xiàng)目，安裝創(chuàng)建項(xiàng)目 ?@latest是項(xiàng)目名稱，可以自己修改項(xiàng)目名稱，然后選擇
2024年02月16日
瀏覽(27)
創(chuàng)建一個(gè)vite+vue3項(xiàng)目詳細(xì)教程
一、首先打開(kāi)本地磁盤，找到一個(gè)存放路徑 ?這里我選擇將新建項(xiàng)目放置在E盤的demo-vitedemo路徑下二、在該路徑處打開(kāi)命令行cmd ?三、在打開(kāi)的命令行中輸入創(chuàng)建命令 ?注意在搭建之前要安裝node.js環(huán)境依賴，并且確認(rèn)你的版本 Vite 需要Node.js版本 14.18+，16+。然而，有些模板需
2024年02月15日
瀏覽(30)
vue3+vite+ts+elementplus創(chuàng)建項(xiàng)目
# vue3+vite+ts+pinia 學(xué)習(xí)筆記 ## 1、創(chuàng)建項(xiàng)目: npm init vite@latest ? ? 選擇: vue、ts ## 2、進(jìn)入項(xiàng)目目錄后：npm install 安裝 ## 3、運(yùn)行項(xiàng)目: npm run dev ## 4、安裝常用插件： ? ? 1、安裝 npm install vue-router@latest 配置:在src目錄下新建router目錄，創(chuàng)建index.ts文件代碼如下: ? ? ? ```javascript 創(chuàng)建
2024年02月09日
瀏覽(19)
Cesium引入vite + vue3
卸載命令使用 vite.config.js 組件使用加載高德地圖高德地圖的加載方便很多，并不需要申請(qǐng)key，可以直接加載到我們的Cesium中。加載ArcGISMap地圖
2024年02月14日
瀏覽(22)
vue3之vite創(chuàng)建h5項(xiàng)目1（創(chuàng)建vite項(xiàng)目、配置IP訪問(wèn)項(xiàng)目、配置多環(huán)境變量與預(yù)覽打包生產(chǎn)效果、配置別名）
初始化項(xiàng)目模塊添加環(huán)境變量文件，每個(gè)文件寫入配置，定義 env 環(huán)境變量前面必須加 VITE_ dev環(huán)境 test環(huán)境 prod環(huán)境在項(xiàng)目根目錄下創(chuàng)建 03-1：配置多環(huán)境變量之dev環(huán)境 .env.development 03-2：配置多環(huán)境變量之test環(huán)境 .env.test 03-3：配置多環(huán)境變量之prod環(huán)境 .env.production 03-4 修改
2024年02月02日
瀏覽(101)
Uni-app + Vue3 + TS +Vite 創(chuàng)建項(xiàng)目
npm 都很熟，可是與 npm 如此相似的 npx 是干嘛的呢？我們?yōu)樯跻榻B npx ? 由于 uni-app 官方提供創(chuàng)建命令使用的是 npx，所以我們先來(lái)了解下 npx 是干什么的？它與 npm 的區(qū)別。 npx 是 npm 的高級(jí)版本，它從 npm v5.2 版本開(kāi)始引入的，與 npm 綁定在一起，無(wú)需額外安裝，具有更大的功
2023年04月15日
瀏覽(22)

<strike id="nakkf"></strike>

<dfn id="nakkf"><button id="nakkf"><samp id="nakkf"></samp></button></dfn>