方式一：直接引入（最简单）
1.安装Cesium（Vue搭建可以看我上一期的文章）
npm i cesium -save
2.将node_modules\cesium\Build\Cesium文件夹拷贝到项目的public文件中
3.在public\index.html引入Cesium
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title><!--在这里引入Cesium和css文件--><script src="Cesium/Cesium.js"></script><link href="Cesium/Widgets/widgets.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>
4.加载Cesium
当我们在index.html中引入了Cesium.js后，默认Cesium对象就挂载到了Window对象上面，在Vue文件中加载：
<template><div class="home"><div id="cesiumContainer"></div></div>
</template><script>
export default {
data() {return {map: {}}
},
components: {},
created() {},
mounted() {const viewer = new window.Cesium.Viewer('cesiumContainer')console.log(viewer)
},
computed: {},
methods: {initMap() {}
}
}
</script>
<style scoped lang="scss">.home {width: 100%;height: 100%;}#cesiumContainer {height: 100%;width: 100%;}
</style>5.运行后我们可能会遇到报错Failed to resolve loader: sass-loader
需要引入 sass-loader 和 node-sass 包：
cnpm install sass-loader -D
cnpm install node-sass -D
6.接下来就可以看到地球啦！
方式二：使用vue-cli-plugin-cesium 插件安装cesium
（因为插件基于webpack的，当前插件只支持 VueCLI3.0+ 版本）
1.安装vue-cli-plugin-cesium
vue add vue-cli-plugin-cesium
![[NOIP2007 普及组] 纪念品分组](https://img-blog.csdnimg.cn/4f8c98d0600d427aade5f3e49f2f4393.png)
