From b86ad3e8b13a1a6ff0a4055cf3e9cf40ea07929c Mon Sep 17 00:00:00 2001 From: nshen Date: Fri, 2 Apr 2021 09:17:27 +0800 Subject: [PATCH] --amend --- README.md | 59 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 31 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index ea87abe..59360c5 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,20 @@ -# ⚡ vite-plugin-cesium +# ⚡ vite-plugin-cesium [![npm](https://img.shields.io/npm/v/vite-plugin-cesium.svg)](https://www.npmjs.com/package/vite-plugin-cesium) Easily set up a [`Cesium`] project in [`Vite`]. -[`Cesium`]: https://github.com/CesiumGS/cesium -[`Vite`]: https://github.com/vitejs/vite +[`cesium`]: https://github.com/CesiumGS/cesium +[`vite`]: https://github.com/vitejs/vite -**update：** if you just wanna a scaffolding by using this plugin, try [create-cesium](https://www.npmjs.com/package/create-cesium), it's simply a command `yarn create cesium`. +**update：** if you just wanna a scaffolding by using this plugin, try a simply command `yarn create cesium`, click [create-cesium](https://www.npmjs.com/package/create-cesium) for more info. Chinese tutorial: [中文教程](https://segmentfault.com/a/1190000039344137) ## Install ```bash -npm i cesium vite-plugin-cesium vite -D +npm i cesium vite-plugin-cesium vite -D # yarn add cesium vite-plugin-cesium vite -D ``` @@ -26,7 +26,7 @@ add this plugin to `vite.config.js` import { defineConfig } from 'vite'; import cesium from 'vite-plugin-cesium'; export default defineConfig({ - plugins: [cesium()], + plugins: [cesium()] }); ``` @@ -38,6 +38,7 @@ add dev command to `package.json` "build": "vite build" } ``` + run: `yarn dev` @@ -49,26 +50,27 @@ run: - **Type :** `boolean` - **Default :** `false` -Default copy min cesium file to dist. if `true` will rebuild cesium from source. +Default copy min cesium file to dist. if `true` will rebuild cesium from source. ```js import { defineConfig } from 'vite'; import cesium from 'vite-plugin-cesium'; export default defineConfig({ - plugins: [cesium({ - rebuildCesium: true - })], + plugins: [ + cesium({ + rebuildCesium: true + }) + ] }); ``` ## Demo - `src/index.js` ```js import { Viewer } from 'cesium'; -import "./css/main.css"; +import './css/main.css'; const viewer = new Viewer('cesiumContainer'); ``` @@ -78,31 +80,31 @@ const viewer = new Viewer('cesiumContainer'); ```html - - - - - + + + + cesium-vite - + - +
- - + ``` `src/css/main.css` ```css -html, body, #cesiumContainer { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - overflow: hidden; +html, +body, +#cesiumContainer { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; } ``` @@ -114,7 +116,8 @@ Add `dev` and `build` commands to `package.json` "build": "vite build" }, ``` -Run `yarn dev` + +Run `yarn dev` For full demo project please check [./demo](https://github.com/nshen/vite-plugin-cesium/tree/main/demo) folder.