vue中使用cesium方法总结

简介: vue中使用cesium方法总结

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


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


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


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


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


(注意:该方法对应的是vue2+vue-cli4)


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

1配置webpack

Cesium and webpack – Cesium

第一种就是配置webpack,这种方法适合对webpack十分熟悉的大佬。


相信看这个视频的肯定webpack不熟吧


我也不熟,所以只针对小白简单科普一下。


vue-cli是基于webpack的构建vue项目的工具,也就是vue-cli搭建的项目模板,在运行时会打包、配置 、转义资源,提高效率


vue-cli在3之后就开始不再自动生成webpack.config.js,而是用手动添加vue.config.js来代替

vue-cli4搭建出来的项目不能正确打包解析cesium内文件,可以理解为cesium内文件结构的问题


如何配置webpack呢?


抄csdn(bushi)


其实就是因为cesium某些资源的路径不满足vue-cli默认打包规则,需要自定义一下。


官网的webpack示例,我也没看明白,CSDN上配置也千奇百怪。


总之我没找到比较官方的Cesium文件打包要做哪些事,估计要自己观察文件结构,结合CSDN来CTRL CV一个了。


小白不要轻易尝试,不然会出很多问题

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)

然后就是使用vue-cesium,一个把cesium组件化的库,就像elementUI的用法一样


这种方法适合对vue和cesium都有一定程度了解的同学


使用方法是先按照文档安装,


然后根据示例,进行开发,就像Ant Design与elementUI一样。


但这种方法,我人为不适合新手,更适合给老手当生产力工具。


而且网上大部分教程都是手撸的JS。


所以,新手还是手撸js代码,比较合适。


相关文章
|
3天前
|
JavaScript 前端开发 安全
Vue响应式设计
【5月更文挑战第30天】Vue响应式设计
23 1
|
2天前
|
JavaScript
vue知识点
vue知识点
9 2
|
3天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
|
3天前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用
|
3天前
|
JavaScript
|
3天前
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
|
3天前
|
编解码 JavaScript API
Vue在移动端的表现如何?
【5月更文挑战第30天】Vue在移动端的表现如何?
10 2
|
3天前
|
JavaScript 前端开发 API
Vue与其他框架的对比优势
【5月更文挑战第30天】Vue与其他框架的对比优势
11 1
|
4天前
|
JavaScript
Vue常用知识点总结
Vue常用知识点总结
11 0
|
5天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
25 7