写在前面

已经搭建VUE开发框架的基础上，搭建此框架

开始搭建

通过npm安装cesium
npm install cesium
将npm安装目录下的\node_modules\cesium\Build\Cesium所有文件拷贝至public下的新建文件夹Cesium
在index.htnl中引入js和css文件

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

方式一(Cesium作为全局变量)

修改声明文件，使编译器不报错
页面组件

<template>
  <div class="home">
    <div class="cesium-container" ref="cesiumContainer"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props: {},
  mounted() {
    const ref: Element = this.$refs.cesiumContainer as Element;
    new Cesium.Viewer(ref);
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home .cesium-container {
  height: 100%;
  width: 100%;
}
</style>

方式二(局部导入)

创建vue.config.js,创建如下内容，为了打包时排除cesium

module.exports = {
    configureWebpack: {
        externals: {
            'cesium': 'Cesium',
        }
    }
}

页面组件

<template>
  <div class="home">
    <div class="cesium-container" ref="cesiumContainer"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Viewer } from "cesium";

export default defineComponent({
  props: {},
  mounted() {
    const ref: Element = this.$refs.cesiumContainer as Element;
    new Viewer(ref);
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home .cesium-container {
  height: 100%;
  width: 100%;
}
</style>