方式一：直接引入（最简单）
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
