vue项目中如何引入cesium
vue项目中引入cesium
市面上的前端框架中,Vue+Cesium 可谓是最佳搭档,一般做 Cesium B 端产品的公司都会使用 Vue,所以后续内容都将基于 Vue
通常情况下,我们要在 Vue 中使用 Cesium,首先要安装 Cesium,然后要在 vue-cli 的 webpack 配置很多东西,对一些有经验的人来说只不过麻烦些,但是对 Cesium 的初学者来说会很痛苦,因为没有使用过,也不知到要怎么配置,只能搜索网上的教程,一步一步踩坑
其实不管是有经验或是初学者,每次写项目重复配置这些东西都很麻烦
vue-cli-plugin-cesium 就是为了解决这个问题
安装步骤
1、npm install cesium --save
2、npm install --save-dev vue-cli-plugin-cesium
3、vue invoke vue-cli-plugin-cesium
vue项目中CDN引用cesium
cesium包太大,本来使用npm install cesium 的方式引用,后发现打包后文件太大,影响了页面加载速度,遂改为cdn引入,打包压缩后小了3M多的体积。
1. index.html cdn引入
<link href="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Widgets/widgets.css" rel="external nofollow" rel="stylesheet"> <script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script>
2. build / webpack.config.js 加入externals 如下配置 (vue/cli2.x版本)
module.exports = { ... externals: { Cesium: 'Cesium' } }
3. cesium使用的组件中 ,import后即可使用
import * as Cesium from 'Cesium'
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit(
这篇文章主要介绍了vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效的解决方法,这里需要主要项目中用的element-ui是V1.4.3,感兴趣的朋友参考下吧2018-08-08element-plus日历(Calendar)动态渲染以及避坑指南
这篇文章主要给大家介绍了关于element-plus日历(Calendar)动态渲染以及避坑指南的相关资料,这是最近帮一个后端朋友处理一个前端问题,elementUI中calendar日历组件内容进行自定义显示,实现类似通知事项的日历效果,需要的朋友可以参考下2023-08-08Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论