vue+Cesium学习（一）

！若不是vue-cli3版本以上需要安装最新版本

 npm install -g @vue/cli3

一丶vue create cesium-demo1 (创建一个项目，名称是cesium-demo1)

二丶下载插件vue add vue-cli-plugin-cesium

vue add vue-cli-plugin-cesium

三丶选择Cesium版本 （我选的1.65）

然后一直回车，发现文件多了一个

 

四丶 打开app.vue文件，将helloword组件删掉换成生成的组件

  npm run serve

会出现这个样子

 因为我们没设置自己的token，所以地图没出来，我们继续找到这个No01-init.vue，改成如下代码： 

 mounted() {
  let url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
  let geogle = new Cesium.ArcGisMapServerImageryProvider({url:url});
  //此处填写你在cesium中注册的token
  Cesium.Ion.defaultAccessToken='你的token';
  this.viewer= new Cesium.Viewer('cesiumContainer',{
    baseLayerPicker: false,          //是否显示图层选择控件
    selectionIndicator: false,
    imageryProvider:geogle,
  });
  }
};

然后Eslint会报红，Ceisum发红是因为插件内部使用了 Webpack 的内置模块 ProvidePlugin 来做到使用 Cesium 对象时将不再需要 import 或 require 引入，而一般我们在使用 VueCLI 创建项目时会默认带上 Eslint，Eslint 语法检验会认为 Cesium 是一个未声明的变量，于是抛出了错误

 package.json 中配置 Eslint 规则允许 no-undef ，如下所示，在 package.json 中 eslintConfig 字段下的 rules 配置 "no-undef": 0 ，在不关掉 Eslint 的情况下单独配置允许未声明的变量

{
  "dependencies": {},
  "devDependencies": {},
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-undef": 0
    }
  }
}

3、保存后重新运行发现不报红了，点开页面看下结果：

 相当哇塞，赶紧动手试一试吧！