vue集成cesium

vue集成cesium

一、软件版本

• npm版本：6.9.0
• yarn版本：0.21.3

nodejs： https://nodejs.org/zh-cn/

yarn： https://www.yarnpkg.com/zh-Hans/

vue-cesium： https://github.com/zouyaoji/vue-cesium/blob/master/README.zh.md

二、记录

前提：已安装 nodejs

1.vue-cli创建项目

• 安装cnpm

> npm install cnpm -g --registry=https://registry.npm.taobao.org

• 安装vue-cli

> cnpm install -g vue-cli

• cd 到项目文件夹，初始化项目（填写项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等）

> cd E://vue-cesium-demo
> vue init webpack

• 安装项目依赖

> cnpm install

2.集成vue-cesium

• 安装vue-cesium

> cnpm i --save vue-cesium

• src/main.js 导入模块（注意：如果 import Vue from 'vue' 已经存在，就去掉一个）

import Vue from 'vue'
import VueCesium from 'vue-cesium'
// Vue-Cesium默认加载`https://unpkg.com/cesium/Build/Cesium/Cesium.js`
Vue.use(VueCesium)

• src/app.vue 修改为：

<template>
  <div class="viewer">
    <vc-viewer></vc-viewer>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  .viewer {
    width: 100%;
    height: 100%;
  }
</style>

3.启动

> npm run dev

• http://localhost:8080

三、其它

1.运行vue-cesium

前提：安装yarn

vue-cesium：https://github.com/zouyaoji/vue-cesium

• 下载并解压 vue-cesium-master.zip

• cd 到解压目录，安装依赖

> cd E://vue-cesium-master
> yarn install

• 运行项目

> npm run dev

• http://localhost:8080

2.nodejs和yarn的镜像配置

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global