說在前面：本文章包含nodejs偎痛，vuejs旱捧，vue-cli3，Cesium等環(huán)境
安裝node踩麦、vue和vue-cli3.0具體參考
Vue 爬坑之路（一）—— 使用 vue-cli 搭建項目
Vue 爬坑之路（十二）—— vue-cli 3.x 搭建項目
一枚赡、環(huán)境說明
image.png
二、初始化vue項目
1.在想要創(chuàng)建項目的目錄下打開cmd谓谦，執(zhí)行
// cesium-demo為項目名
vue create cesium-demo
2.設(shè)置所需要的vue選項贫橙，下圖為參考
image.png
3.選擇配置項（空格選擇），下圖為我常用的
image.png
4.選擇路由方式反粥，y為history卢肃，n為hash
image.png
5.CSS預(yù)編譯工具
image.png
6.eslint檢查標準選擇
image.png
7.什么時候檢查？
image.png
8.配置的文件都放哪里才顿？
image.png
9.是否保存配置以便下次使用莫湘？
image.png
10.等待初始化成功
三、引入Cesium庫
1.進入到項目的文件夾娜膘，在此處打開cmd逊脯，輸入
npm install cesium -s
2.引入完成后，在項目文件夾下新建文件：vue.config.js竣贪，文件內(nèi)容為：
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
// 基本路徑
publicPath: "./",
// 輸出文件目錄
outputDir: "dist",
// eslint-loader 是否在保存的時候檢查
lintOnSave: false,
// webpack-dev-server 相關(guān)配置
devServer: {
open: process.platform === "darwin",
host: "0.0.0.0",
port: 5000,
https: false,
hotOnly: false
},
configureWebpack: {
output: {
sourcePrefix: ' '
},
amd: {
toUrlUndefined: true
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src'),
'cesium': path.resolve(__dirname, cesiumSource)
}
},
plugins: [
new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./')
})
],
module: {
unknownContextCritical: /^.\/.*$/,
unknownContextCritical: false
}
}
};
3.在views文件夾下新建組件CesiumScene.vue军洼，文件內(nèi)容：
<template>
<div id="cesiumContainer"></div>
</template>
<script>
import Cesium from "cesium/Cesium";
import widget from "cesium/Widgets/widgets.css";
export default {
name: "CesiumScene",
data() {
return {};
},
mounted() {
this.init();
},
beforeDestroy() {},
methods: {
init() {
let viewerOption = {
geocoder: false, // 地理位置查詢定位控件
homeButton: false, // 默認相機位置控件
timeline: false, // 時間滾動條控件
navigationHelpButton: false, // 默認的相機控制提示控件
fullscreenButton: false, // 全屏控件
scene3DOnly: true, // 每個幾何實例僅以3D渲染以節(jié)省GPU內(nèi)存
baseLayerPicker: false, // 底圖切換控件
animation: false // 控制場景動畫的播放速度控件
};
let viewer = new Cesium.Viewer(this.$el, viewerOption);
viewer._cesiumWidget._creditContainer.style.display = "none";// 隱藏版權(quán)
}
}
};
</script>
<style lang='scss' scoped>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
4.修改App.vue文件內(nèi)容如下：
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="scss">
html,
body,
#app {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
color: #000;
overflow: hidden;
}
</style>
5.修改路由如下：
import Vue from 'vue'
import Router from 'vue-router'
import CesiumScene from './views/CesiumScene.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'scene',
component: CesiumScene
}
]
})
四巩螃、啟動項目
1.在項目文件夾下打開cmd，輸入
npm run serve
2.打開瀏覽器匕争，輸入IP或localhost+端口號避乏，即localhost:5000，查看結(jié)果
image.png
