vue-cli3.x脚手架搭建vue项目并整合cesium

vue-cli3.x官方网址：https://cli.vuejs.org/zh/
参考网址：https://www.jianshu.com/p/0815c76d949f

vue-cli3.x创建vue项目

1、安装@vue/cli 3.x

npm install -g @vue/cli

2、创建vue项目

vue create my-project
# OR
vue ui

vue整合cesium

如果创建vue项目使用的是vue-cli3.x默认的配置，那么生成的目录结构如下：

image.png

1、下载cesium依赖包

npm install cesium --save

2、在vue工程的根目录下新建vue.config.js文件，内容如下：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
    publicPath: '',
    devServer: {
        port: 9999
    },
    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('./')
            })
        ]
    }
}

3、修改HelloWorld.vue文件如下：

<template>
  <div id="cesiumContainer">

  </div>
</template>

<script>
    import Cesium from 'cesium/Cesium'
    import widget from 'cesium/Widgets/widgets.css'
export default {
  name: 'HelloWorld',
    mounted () {
        var viewer = new Cesium.Viewer('cesiumContainer')
    }
}
</script>


<style scoped>
    #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>

vue-cli3.x命令

npm run serve      //启动服务

npm run build      //程序打包