一分鐘搭建 Vite + Cesium 開發環境

時間 2021-04-03

標籤 css html webpack git github web npm json bash 欄目 CSS 简体版

原文原文鏈接

⚠ 2021年4月1日更新：10秒鐘搭建 Vite + Cesium 開發環境css

建立目錄html

mkdir cesium-vite-test
cd cesium-vite-test/

建立 package.jsonwebpack

yarn init -y

安裝依賴git

yarn add -D cesium vite vite-plugin-cesium

因爲 Cesium 不是一個普通的 npm 包，須要依賴一些 css ，圖片，json 啥的。咱們要參考 Cesium 官方的 webpack 教程來作一堆額外的工做。值得慶幸的是如今 Vite 有了 vite-plugin-cesium 插件，來幫咱們完成這些配置。github

建立 vite.config.jsweb

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium'; // 引入插件
export default defineConfig({
    plugins: [cesium()],
});

在 package.json 中加入 dev 和 build 命令npm

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

配置完成分割線。json

能夠開始寫代碼開發了。bash

src/index.jsui

import { Viewer } from 'cesium';
import "./css/main.css";

const viewer = new Viewer('cesiumContainer');

index.html

<!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">
    <title>cesium-vite</title>
    <script type="module" src="/src/index.js"></script>
</head>

<body>
    <div id="cesiumContainer"></div>
</body>

</html>

src/css/main.css

html, body, #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

運行 yarn dev ，噠噠完成。

完整代碼請看 vite-cesium-demo 喜歡請去點個贊，謝謝。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。