1、创建vue项目
vue create my_demo2、下载Cesium
可以从官网下载，也可以使用node下载
npm install cesium3、把node_modules文件夹中下载得Cesium，移出到public文件夹下
4、将Cesium.js 以及样式文件widgets.css在index.html中引用
<!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>myDEmo</title><link rel="stylesheet" href="./static/Cesium//Widgets/widgets.css" /></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't workproperly without JavaScript enabled. Please enable it tocontinue.</strong></noscript><div id="app"></div><script type="text/javascript" src="./static/Cesium/Cesium.js"></script><!-- built files will be auto injected --></body>
</html>5、新建vue文件，在vue文件中初始化场景
<template><div id="cesiumContainer" class="cesium-container"></div>
</template>
<script>
export default {name: "CesiumMap",methods: {},mounted() {let viewer = new Cesium.Viewer("cesiumContainer");}
};
</script>6、效果如下：
遇到问题如下：
'Cesium' is not defined 问题：package.json 文件eslintConfig 添加
"globals": {
"Cesium": true
}
CesiumMap.vue文件不支持ts，改用js写，如要用ts请百度
The "HelloWorld" component has been registered but not used 问题 例如xxx已经注册，但是为使用这种问题 eslint 问题 解决办法是：package.json 文件eslintConfig 添加
"rules": {
"vue/no-unused-components": "off",
"no-unused-vars": "off"
},
)
