---

一、引入Cesium包

首先在项目文件路径中打开终端，输入一下命令为VUE项目项目引入Cesium

npm install cesium --save

二、将Cesium包放入VUE的静态文件下

当npm install cesium --save下载完毕后，在vue的 node_modules 文件夹下此路径下将 Cesium 文件复制，

然后粘贴在 VUE 的静态文件下，（我的静态文件为 public文件夹）。

三、引入Cesium的css文件和JavaScript文件

在inde.html 文件中引入Cesium的css文件

<link rel="stylesheet" href="Cesium/Widgets/widgets.css">

在inde.html 文件中引入Cesium的 JavaScript 文件

<script src="Cesium/Cesium.js"></script>

四、创建一个earth组件，使用Cesium

这里我在 components 文件夹下创建一个 earth 组件

代码如下

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

<script>
export default {
  data() {
    return {
      map: {}
    }
  },
  components: {},
  created() {},
  mounted() {
    new Cesium.Viewer('cesiumContainer')
  },
  computed: {},
  methods: {
    initMap() {}
  }
}
</script>
<style scoped lang="scss">
    .home {
        height: 100vh;
        #cesiumContainer {
            height: 100%;
            border: 1px solid gray;
        }
    }
</style>

四、引入earth组件

在需要的使用的界面中引入刚刚创建的 earth 组件

import Earth from '@/components/Earth'
export default {
  components: {
    Earth
  }
}

使用：

<Earth></Earth>

效果：