vue 整合 cesium 的最佳实践

经常有小伙伴询问vue如何整合cesium，目前网上关于vue如何整合cesium的文章已经相当多了，但是面对如此复杂的配置项，还是一筹莫展。

下面就祭出vue整合cesium的最佳实践方法（个人看法）。

首先，要介绍的一个插件项目 vue-cli-plugin-cesium

项目地址：www.npmjs.com/package/vue…

注意：插件只支持vue-cli3.0+版本

介绍

vue-cli-plugin-cesium 是一个针对 Cesium 的 vue-cli 扩展插件，使用它将会让我们在 vue-cli 中零配置使用 Cesium

它会在我们已经创建好的 vue-cli 中做基于 Cesium 的扩展，如下

• 自动安装 cesium 并追加至package.json依赖项(可自选版本)

• 自动扩展 vue-cli 中 cesium 相关的 webpack 配置

  • 添加一个cesium别名，以便我们在项目中轻松的引入它
  • 使 Cesium 对象实例可在每个 Vue 模块中使用而无须 import 引入
  • 使 webpack 可正常打包 Cesium
  • 允许 webpack 友好地在 Cesium 中使用 require，解决 require 引入警告
  • 开发环境生成 sourcemap，生产环境取消 sourcemap
  • 生产环境抽取公共模块执行压缩
  • 生产环境 loader 切换到优化模式
  • 自动在全局 main.js 中引入Widgets.css，可选

• 自动在components/文件夹下生成示例文件，可选

安装

只需一行命令搞定所有的事，不用再去关心 webpack 如何配置了，不用再去关心如何安装 cesium 了，它都帮你搞定了，而且不会给你的工程添加任何文件，保证了项目的简洁。

vue add vue-cli-plugin-cesium

代码提示

在编写代码时，如果遇到没有Cesium的代码提示，你是不是很老火，毕竟Cesium 的 API 可是有那么多，纯靠记住那是不可能的啦，敲都可能敲错，安装提示插件就好了

npm i @types/cesium

接下来，就是起飞了。。。