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配置
- 进入node_modules\cesium\Build文件夹中,将编译好的Cesium文件复制到根目录下的static中,并把其中Cesium.js删除
- 在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组件
- 新建一个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