记vue中引入cesium

因为个人原因，已经很久很久没有写过博客了，但是学过的东西终归还是要记录滴，以下是在vue中引入cesium，具体步骤如下

一、首先安装vue-cli,因为之前接触vue的时候都是自己手动配置webpack,感觉每一步都知道所以然，但是现在直接使用vue-cli后确实是方便了很多，但是里面好多的配置都是不知所以然，就按照官方的配置进行了配置，运行结果出来了，也没有问题，

需要使用到node环境，这里就不多说了，没有就安装一个吧！

1、安装vue-cli,执行命令npm install -g vue-cli,这里是全局安装，如果没有-g安装完成之后执行是有问题的。

2、初始化项目，这个可以自定义，使用vue init webpack cesium-demo,其中webpack是模板名称，cesium-demo是初始化的项目名称，之后会出现一连串的确认，例如作者，版本等等，一路回车，等所有结束之后会在当前文件夹下出现一个package.json文件。

二、安装cesium

1、进入cesium-demo文件夹，命令为cd cesium-demo

2、执行npm install cesium,等待安装完成

3、执行npm run dev,如果出现vue的界面，则证明上述过程无误，继续向下

三、修改webpack配置

1、在build文件夹下的webpack.base.conf.js中设置cesium源码的路径

增加一行  const cesiumSource='../node_modules/cesium/Source'，之后再resolve中增加一行cesium的路径

在modules的rules中再增加两行，

unknownContextRegExp: /^.\/.*$/,

unknownContextCritical:false

之后在webapck.dev.conf.js中的plugins中增加三行

new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),

new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),

new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),

四、修改vue文件，

1、首先再components文件夹下新建一个cesiumViewer.vue文件，或者也可以直接再App.vue中进行修改，那种都行，新建之后在组建内引入cesium以及相关的css文件，如下：

2、在App.vue中引入上面组件，并设置相关的css样式（直接在App.vue中进行修改的话此步骤无）

3、运行npm run dev ，效果如下：