Cesium 开发笔记-Vue 中使用 Cesium（vue-cli-plugin-cesium）

Cesium 开发笔记-Vue 中使用 Cesium（vue-cli-plugin-cesium）

通常情况下，我们要在 Vue 中使用 Cesium，首先要安装 Cesium，然后要在 vue-cli 的 webpack 配置很多东西，对一些有经验的人来说只不过麻烦些，但是对 Cesium 的初学者来说会很痛苦，因为没有使用过，也不知到要怎么配置，只能搜索网上的教程，一步一步踩坑
其实不管是有经验或是初学者，每次写项目重复配置这些东西都很麻烦

vue-cli-plugin-cesium 是一款针对 Cesium 的 VueCLI 扩展插件，使用它将会让我们在 VueCLI 中零配置使用 Cesium，基于 VueCLI3.0+

它会在我们已经创建好的 VueCLI 项目中做基于 Cesium 的扩展，截止目前它的功能也可以说它解决的问题如下

1. 自动安装 Cesium 并追加至 package.json 依赖项(可自选版本)
2. 自动扩展 VueCLI 中 Cesium 相关的 webpack 配置
3. 添加一个 cesium 别名，以便我们在项目中轻松的引入 Cesium 文件资源
4. 使 Cesium 对象实例可在每个 Vue 模块中使用而无须 import 引入 使 webpack 可正常打包 Cesium
5. 允许 webpack 友好地在 Cesium 中使用 require，解决 require 引入警告
6. 开发环境生成 sourcemap，生产环境取消 sourcemap
7. 生产环境抽取公共模块执行压缩
8. 生产环境 loader 切换到优化模式
9. 自动在全局 main.js 中引入Widgets.css，可选
10. 自动在 components/ 文件夹下生成示例文件，可选*

安装

vue-cli-plugin-cesium 是基于 VueCLI 的扩展插件，所以在使用前要先使用 VueCLI 创建一个 Vue 项目
当前插件只支持 VueCLI3.0+ 版本哦

使用方式一

使用方式二

首先安装 vue-cli-plugin-cesium 插件，推荐使用 yarn 安装，因为它更简洁

安装完成后我们要使用 vue invoke 来初始化这个插件

安装过程

在 vue invoke 或 vue add 的过程中会有三个询问

询问一

Please choose a version of 'cesium' from this list
请在列表中选择 cesium 的版本

在此选择想使用的 Cesium 版本

询问二

Whether to import styles globally. 
This operation will automatically import widgets.css in main.js
是否全局引入样式,该操作将自动在main.js引入widgets.css？

此项默认为 yes，该操作将自动在 main.js 引入 widgets.css，即全局引入 Cesium 的 css 样式

询问三

Whether to add sample components to the project components directory
是否添加示例组件到项目components目录?

此选项默认为 yes，该操作会自动在 src/components 文件夹下生成 CesiumExample 文件夹，此文件夹中包含一些 Cesium 的使用示例供参考

GUI 安装

如果我们使用 vue ui 创建项目，也可以直接在项目创建后的插件选项里搜索 vue-cli-plugin-cesium 并安装

选中插件点击安装

使用

开发时如下，直接在模块中使用 Cesium 对象即可

结束：

安装完成后，就可以在 vue 项目中任意模块中使用 Cesium 了

你可以在每个 Vue 模块中直接使用 Cesium 对象实例而无须 import 引入。

cesium之路漫漫而长远。

[参考文档]：https://www.npmjs.com/package/vue-cli-plugin-cesium