vuecli3/4-cesium环境构建
Posted BerryJamLv
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuecli3/4-cesium环境构建相关的知识，希望对你有一定的参考价值。
-
打开终端使用
vue create vuecli4-cesium新建vue-cli3项目
或使用vue ui手动构建带有vuex和vue-router依赖的项目 -
使用
vscode打开项目，在终端内输入npm install -S cesium(必须加-S参数，否则出现引用错误) -
将
/nodemodules/cesium/Build/Cesium文件夹复制到/public目录下（关键） -
打开
/public/index.html加入
<link rel="stylesheet" href="Cesium/Widgets/widgets.css">
<script src="Cesium/Cesium.js"></script>
Cesium 同级引用 public/Cesium 目录
<!-- 加入后的文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="Cesium/Widgets/widgets.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without javascript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="Cesium/Cesium.js"></script>
</body>
</html>
- 打开
/src/components/HelloWorld.vue并修改如下
<template>
<div id="container"></div>
</template>
<script>
/* eslint-disable no-undef */
export default
name: 'HelloWorld',
mounted()
new Cesium.Viewer('container');
,
props:
msg: String
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#container
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
</style>
- 根目录新建
vue.config.js
// 忽略eslint
module.exports =
lintOnSave: false
- （可选）添加element-ui依赖
npm install element-plus -S
修改main.js
import createApp from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
- 运行项目
npm run serve
以上是关于vuecli3/4-cesium环境构建的主要内容，如果未能解决你的问题，请参考以下文章
SAP Commerce Cloud 构建环境和最终运行环境的区别
GroovyGradle 构建工具 ( 自动下载并配置构建环境 | 提供 API 扩展与开发工具集成 | 内置 Maven 和 Ivy 依赖管理 | 使用 Groovy 编写构建脚本 )