Vue+Cesium集成笔记

1. 安装环境
   在学习过程中，参考以下学习博客
   基于webpack 构建Cesium + Vue 的应用
   主要使用了node npm vue vue-cli webpack cesium等工具和环境。

2. 使用node安装vue-cli
   cmd跳转到你想要放置开发项目的文件路径下，在该路径下运行cmd命令：
   ~$ npm install -g vue-cli
   ~$ vue -V //查看vue-cli的版本

3. 使用vue-cli脚手架 创建Webpack 模板项目
   ~$ vue init webpack vue-cesium
   其中vue-cesium 是项目名称，自己可以随意命名；
   之后是一系列项目的配置，按个人需要选择就好（一般配置为no，除vue-router可根据需要配置为yes）
   接着npm将会自动安装下载模板和许多依赖项，等到下载完毕 后， cd到你创建的项目文件中，本文是vue-cesium，命令如下所示：
   ~$ cd vue-cesium
   ~$ npm run dev
   正常情况下 在浏览器输入http://localhost:8080 就可以看到vue的界面了

4. npm安装Cesium 环境（cesium的配置步骤）
   在vue-cesium文件路径中运行cmd命令，输入以下命令将cesium作为项目依赖项
   npm install cesium --save
   当cesium下载完毕后，再进行下面的文件配置工作
   （1）配置webpack.base.conf.js文件
   进入build 文件夹，编辑webpack.base.conf.js
   定义 Cesium 源码路径const cesiumSource = '…/node_modules/cesium/Source’
   在output 里加入sourcePrefix: ’ ’ 让webpack 正确处理多行字符串配置 amd参数,
   如下图所示：
   
   
   在resolve 中设置 别名 ‘cesium’: path.resolve(__dirname, cesiumSource)
   定义别名cesium后，cesium代表了cesiumSource的文件路径。
   
   在module 中加入 unknownContextCritical: false, 让webpack 打印载入特定库时候警告：
   
   （2）配置 webpack.dev.conf.js 文件
   进入build文件夹，编辑 webpack.dev.conf.js文件
   定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有 …/ ），
   const cesiumSource = ‘node_modules/cesium/Source’
   定义 Cesium Workers 路径：
   const cesiumWorkers = ‘…/Build/Cesium/Workers’，
   
   在plugin中加入下面插件,拷贝静态资源
   （3）配置 webpack.prod.conf.js 文件
   进入 build 文件夹，编辑webpack.prod.conf.js文件
   定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有…/）
   const cesiumSource = 'node_modules/cesium/Source’
   定义 Cesium Workers 路径
   const cesiumWorkers = '…/Build/Cesium/Workers’
   
   在plugins 中加入下面插件,拷贝静态资源注意这里的CESIUM_BASE_URL: JSON.stringify(’./’)与dev 配置的不同，这是cesium 加载静态资源的路径，配置为相对路径。
   
   （4）配置config/index.js文件
   进入config 文件夹，配置index.js文件
   这里有 dev 、build 两个 配置项
   配置 build 下的assetsPublicPath 为：’’，如图所示：
   
   到此，webpack的相关设置完毕，现在我们可以创建vue组件进行cesium的开发工作了。

5. 创建cesiumViewer组件
   在components文件夹中创建cesiumViewer.vue组件，其具体代码为：
   
   包括三部分：template模板部分，script行为部分和style样式部分。
   修改src/router下的index.js 文件为：
   
   修改 src 下的 App.vue 文件：
   
   最后修改 src 下的 main.js：
   
   （注释：其中Vue.prototype.Cesium = Cesium为设置全局变量，在以后所有的组件中，可以直接使用this.Cesium语句调用Cesium。比如在cesiumViewer.vue组件中，我们就使用了var viewer = new this.Cesium.viewer（“cesiumContainer”);进行cesium的初始化工作。）

以上所有工作完成后，运行npm run dev ,浏览器中输入localhost:8080,即可看到cesium运行界面。（8080为默认端口，你可根据需要在config/indecx.js文件中自定义所需要的端口号！）

第一次搭建vue-cesium，如有错误还请各位大佬指教！