基于Webpack的Cesium+Vue应用

1.安装Node.Js

2.安装Vue-cli脚手架

npm install -g vue-cli
vue -V   //安装成功后可以查看当前vue的版本，注意V是大写的
vue list //通过list命令我们可以看到vue有六种模板，我们使用webpack模板构建

3.创建Webpack模板的项目

vue init webpack 项目名称

4.安装Cesium环境

npm install cesium

5.Webpack配置

1. 进入node_modules\cesium\Build文件夹中，将编译好的Cesium文件复制到根目录下的static中，并把其中Cesium.js删除
2. 在build/webpack.base.conf.js下的output中加入sourcePrefix: ’ '，让Webpack正确缩进多行字符串。

output: {
	    path: config.build.assetsRoot，
	    filename: '[name].js'，
	    publicPath: process.env.NODE_ENV === 'production'
	      ? config.build.assetsPublicPath
	      : config.dev.assetsPublicPath，
	    sourcePrefix: ' '
	 }

3.在build/webpack.base.conf.js下的module中加入unknownContextCritical: false，让Webpack打印载入特定库时候的警告
4.在build/webpack.base.conf.js下的module中加入unknownContextRegExp: /^./.$/，为了解决Error: Cannot find module "."该错误*

module: {
    rules: [
     .....
    ]，
    unknownContextRegExp: /^.\/.*$/，
    unknownContextCritical: false
  }

6.编写Vue组件

1. 新建一个cesiumViewer的组件
   在src下新建一个名为cesiumViewer.vue的组件，代码如下:

<template>
	<!-- 放置Cesium的容器 -->
    <div id="cesiumContainer"></div>
</template>

<script>
//导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
import Viewer from "cesium/Source/Widgets/Viewer/Viewer";
//我们刚才所说的如何让Cesium知道静态资源在哪里的API
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
//导入必须的样式表
import "cesium/Source/Widgets/widgets.css";

export default{
    name:"cesiumContainer"，
    mounted:function () {
        //设置静态资源目录
        buildModuleUrl.setBaseUrl('../static/Cesium/')
        //创建viewer实例
        this.viewer = new Viewer('cesiumContainer');
    },
    data () {
        return {
            'viewer' : {}
        }
    }
}
</script>

<style scoped>

</style>

2.在App.vue中注册组件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import cesiumViewer from "./components/cesiumViewer.vue"
export default {
  name: 'App',
  components : {
    'cesiumViewer' : cesiumViewer
  }
}
</script>

<style>
html,body, #cesiumContainer {
 width: 100%; 
 height: 100%; 
 margin: 0; 
 padding: 0; 
 overflow: hidden;
}
#app {
  font-family: 'Avenir'， Helvetica， Arial， sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
</style>

3.修改router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import cesiumViewer from '@/components/cesiumViewer'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'cesiumViewer',
      component: cesiumViewer
    }
  ]
})

运行项目

npm run dev