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 add vue-cli-plugin-cesium

　　//非全局安装的vue-cli可以

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

　　

 　　//npm

　　npm install --save-dev vue-cli-plugin-cesium

　　//yarn

　　yarn add vue-cli-plugin-cesium

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

　　

 　　vue invoke vue-cli-plugin-cesium

 　　//非全局安装的vue-cli可以

 　　npx vue add vue-cli-plugin-cesium

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

询问一
　　1.Please choose a version of 'cesium' from this list
　　2.请在列表中选择 cesium 的版本
在此选择想使用的 Cesium 版本

询问二
　　1.Whether to import styles globally.
　　2.This operation will automatically import widgets.css in main.js
　　3.是否全局引入样式,该操作将自动在main.js引入widgets.css？
此项默认为 yes，该操作将自动在 main.js 引入 widgets.css，即全局引入 Cesium 的 css 样式

询问三
　　1.Whether to add sample components to the project components directory
　　2.是否添加示例组件到项目components目录?
此选项默认为 yes，该操作会自动在 src/components 文件夹下生成 CesiumExample 文件夹，此文件夹中包含一些 Cesium 的使用示例供参考
原文链接：https://blog.csdn.net/lxjxxx423/article/details/115914975

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