「这是我参与2022首次更文挑战的第29天，活动详情查看：2022首次更文挑战」
为什么要全局引用 cesium
当我们创建一个vue-cli项目的时候，有时会应用一些插件，来实现我们的某些功能，有些插件因为我们使用很高或者就是vue的生态插件，所以全局引用很方便，这里面比如：vuex、vue-router、axios...等等，但是同时也有一些js插件或者js库，并没有这样的全局引用的功能，比如我们下面介绍的：cesium，这时候就要我们自己来实现全局引用。
对于高频引用的js插件或者js库，使用全局引用可以使我们的代码更加简洁，易操作，方便修改，降低代码量，等好处。
怎么实现全局引用 cesium
对于一个运用cesium的项目来说，引用cesium几乎是家常便饭的，正式因为这样，所以我就想全局来引用它，让它使用起来像vuex和vue-router一样方便。接下来我们就来实现它，我提供了两个思路：
方案一
绑定在Window原型上
1. 创建一个 shims-window-cesium.d.ts 文件
如下图：
2. Window上创建Cesium
在shims-window-cesium.d.ts 文件写下如下代码：
declare namespace globalThis {
import("cesium");
import * as Cesium from "cesium";
interface Window {
Cesium?: Cesium;
}
}
3. Window上赋值Cesium
import * as Cesium from "cesium";
window.Cesium = Cesium;
4. 完成
我们可以通过下面代码，查看是否绑定成功。
console.log(window.Cesium);
方案二
绑定在vue原型上
1. 创建一个\libs\cesium\index.ts文件
如下：
2. 编写插件应用
在\libs\cesium\index.ts文件中写下如下代码：
import * as Cesium from "cesium";
import { App } from "vue";
declare module "@vue/runtime-core" {
interface ComponentCustomProperties {
readonly $cesium: unknown;
}
}
export default {
install: function (app: App<Element>): void {
app.config.globalProperties.$cesium = Cesium;
},
};
3. 注册cesium插件
在main.ts文件中改写代码如下：
createApp(App).use(router).use(cesium).mount("#app");
4. 完成
我们可以通过下面代码，查看是否绑定成功。
console.log(this.$cesium);
总结
以上就是我实现cesium全局引用的方法，希望对大家有用，同时也希望大家多多点赞和提意见，这样我才有动力努力创作，最后谢谢大家的浏览！！！
