vue中使用cesium方法总结

1. 最近做的毕设用到了cesium，这里给大家总结一下vue如何结合cesium

2. 首先确定你使用的脚手架，vue-cli还是vite

   插件 | Vite 官方中文文档 (vitejs.dev)

3. 如果是vite，那么只需要在官方文档中找到社区插件，然后找到cesium安装即可使用

4. 如果你是用vue-cli(大部分还是使用这个)，有三种方式可以引入cesium

5. （注意：该方法对应的是vue2+vue-cli4）

6. 最后可能，CDN的引入方法才最适合你的，有的时候不要死磕，时间成本很重要，遇到问题再解决。

1配置webpack

Cesium and webpack – Cesium

1. 第一种就是配置webpack，这种方法适合对webpack十分熟悉的大佬。
2. 相信看这个视频的肯定webpack不熟吧
3. 我也不熟，所以只针对小白简单科普一下。
4. vue-cli是基于webpack的构建vue项目的工具，也就是vue-cli搭建的项目模板，在运行时会打包、配置 、转义资源，提高效率
5. vue-cli在3之后就开始不再自动生成webpack.config.js，而是用手动添加vue.config.js来代替
6. vue-cli4搭建出来的项目不能正确打包解析cesium内文件，可以理解为cesium内文件结构的问题
7. 如何配置webpack呢？
8. 抄csdn（bushi）
9. 其实就是因为cesium某些资源的路径不满足vue-cli默认打包规则，需要自定义一下。
10. 官网的webpack示例，我也没看明白，CSDN上配置也千奇百怪。
11. 总之我没找到比较官方的Cesium文件打包要做哪些事，估计要自己观察文件结构，结合CSDN来CTRL CV一个了。
12. 小白不要轻易尝试，不然会出很多问题

2使用vue-cli-plugins插件

isboyjc/vue-cli-plugin-cesium: Cesium encapsulation based on Vue cli (github.com)

• 第二种是使用vue-cli的插件
• 这种方式最简单，不会出现问题，适合vue+cesium都不够熟悉的新手
• 这个插件是个人基于vue-cli-plugins的开发规则开发出来的，链接我也放在评论区了
• 使用方法也十分的简单，只需要按照要求安装即可。
• 需要注意的是，不要随意卸载。卸载后再安装会有语法检查不通过，通过不了就无法安装，无法安装就语法检查不通过，
• 通过了不了就无法安装…balabala

3使用vue-cesium

zouyaoji/vue-cesium: Vue 2.x & Vue 3.x components for CesiumJS. (github.com)

1. 然后就是使用vue-cesium，一个把cesium组件化的库，就像elementUI的用法一样
2. 这种方法适合对vue和cesium都有一定程度了解的同学
3. 使用方法是先按照文档安装，
4. 然后根据示例，进行开发，就像Ant Design与elementUI一样。
5. 但这种方法，我人为不适合新手，更适合给老手当生产力工具。
6. 而且网上大部分教程都是手撸的JS。
7. 所以，新手还是手撸js代码，比较合适。