首先要有vuecli腳手架工具這個之前裝過有教程不再贅述
1.新建一個項目 （項目名字隨便起無所謂，這里就叫cesiumtest1）
vue create cesiumtest1
2.安裝vue-cli-plugin-cesium
vue-cli-plugin-cesium 是基於 VueCLI 的擴展插件，所以在使用前要先使用 VueCLI 創建一個 Vue 項目
如果您不了解 VueCLI 的使用，請移步 VueCLI-官網
當前插件只支持 VueCLI3.0+ 版本哦
創建好一個 Vue 項目后就可以按照以下步驟使用該插件了，同所有 VueCLI 插件一樣，它有兩種使用方式，推薦使用方式一
使用方式一
推薦使用 vue add 這種方式安裝，一步到位，簡單便捷
vue add vue-cli-plugin-cesium
// 非全局安裝的vue-cli可以 npx vue add vue-cli-plugin-cesium 復制代碼使用方式二
首先安裝 vue-cli-plugin-cesium 插件，推薦使用 yarn 安裝，因為它更簡潔
// npm npm install --save-dev vue-cli-plugin-cesium // yarn yarn add vue-cli-plugin-cesium 復制代碼安裝完成后我們要使用 vue invoke 來初始化這個插件
vue invoke vue-cli-plugin-cesium
// 非全局安裝的vue-cli可以 npx vue invoke vue-cli-plugin-cesium 復制代碼安裝過程
在 vue invoke 或 vue add 的過程中會有三個詢問
詢問一
Please choose a version of 'cesium' from this list
請在列表中選擇 cesium 的版本
復制代碼在此選擇想使用的 Cesium 版本
詢問二
Whether to import styles globally.
This operation will automatically import widgets.css in main.js
是否全局引入樣式,該操作將自動在main.js引入widgets.css？
復制代碼此項默認為 yes，該操作將自動在 main.js 引入 widgets.css，即全局引入 Cesium 的 css 樣式
如果此項設置為 no，那么開發時我們要手動引入widgets.css樣式文件，引入命令如下
import "cesium/Widgets/widgets.css"
復制代碼詢問三
Whether to add sample components to the project components directory
是否添加示例組件到項目components目錄?
復制代碼此選項默認為 yes，該操作會自動在 src/components 文件夾下生成 CesiumExample 文件夾，此文件夾中包含一些 Cesium 的使用示例供參考
如果此項設置為 no，則不生成示例文件
上面的步驟完成后 直接 npm run serve發現報錯：
原因：由於在 ./node_modules/cesium/Source/ThirdParty/zip.js 文件中使用了 import.meta 語法，webpack 默認不支持，在進行項目構建時，會報如下錯誤，提示信息需要添加 loader。
解決如下：
1.安裝loader
npm install @open-wc/webpack-import-meta-loader --save-dev
or yarn add @open-wc/webpack-import-meta-loader --dev
1.配置下vue.config.js沒有就在根目錄下新建一個，內容如下：
const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const cesiumSource = './node_modules/cesium/Source'
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
devServer: {
port: 8888,
open: true,
},
configureWebpack: {
output: {
sourcePrefix: ' ' // 1 讓webpack 正確處理多行字符串配置 amd參數
},
amd: { // 2
toUrlUndefined: true // webpack在cesium中能友好的使用require
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src'),
'components': path.resolve('src/components'),
'assets': path.resolve('src/assets'),
'views': path.resolve('src/views'),
'cesium': path.resolve(__dirname, cesiumSource)
}
},
plugins: [ // 4
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), 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({ // 5
CESIUM_BASE_URL: JSON.stringify('./')
})
],
}
};
