GIS系列（六）Vue-cli工程与Cesium的整合

 

首先你的计算机得有node环境，这是一个js的runtime（运行时环境），node官网下载地址，安装教程见其他博主。

接下来去vue-cli官网查看安装搭建vue-cli的教程。大致为以下几步：

1.在你喜欢的盘内新建一个文件夹，比方说叫cesiumtest。按下win+R打开cmd，进入你想要建立项目的磁盘（命令是E：）然后进入你刚才建立的文件夹（cd cesiumtest）。

2.接着写下面的命令，不想写直接复制官网的也行：

npm install -g @vue/cli

按回车等待安装完成，接下来输入

vue --version

 验证是否安装成功，有版本号信息就证明成功

3.输入vue init webpack  这个命令，如果提示你没有webpack，那你需要先 npm install webpack，完事之后在输入vue init webpack 。

正常来讲当你输入vue init webpack完成以后它会自动提示你创建项目，并且提供项目关键信息。按照我的方式填写就可以。大致是下面这个样子:

接下来系统会帮你下载安装vue cli工程安装完成之后会提示你：

写完以后按下回车，系统会给你一个地址，复制这个地址，例如：http://localhost:8080 输入到浏览器地址栏，打开即可。

 DONE  Compiled successfully in 2881ms                                                                                                                                     10:11:59 ├F10: AM┤

 I  Your application is running here: http://localhost:8080

打开以后你会看到这个：

4.这证明你的vue项目搭建成功了，接下来我们需要一个IDE（开发工具，就是写代码用的编辑器），你可以下载vs code或者HBuilder X都可以。这两个都不错。

例如你用的vs code，打开它，并且用它把我们的项目打开，选择  文件 → 打开文件夹，打开我们刚才在E盘里面建立的项目。项目结构如下图所示

我们建立一个终端，选择 终端→新终端，在这个终端里输入命令和在刚才的cmd窗口里输入是一样的。我们也可以在这里写npm run dev。

5.接下来我们想办法把cesium.js引入。首先我们用npm下载它，命令这么写：npm install cesium。

现在cesium已经被下载到node_modules里面了，也就是说现在cesium在库里面，项目中如果想用还得引入。现在我们首先把这个首页更改一下：

首先把这个文件里的原始的内容清理掉，只留下标签。然后我们去cesium官网，看一下怎么引入cesium

cesium官网上有这么一段代码，看到这段代码我就放心了。我们直接把这段代码写道holleworld的

在这里特别说明一下。新手同学要对vue的生命周期有一定的了解。这些代码的执行是要放在挂载完成的钩子下的。（mounted）

写完以后保存在终端里重新输入npm run dev，启动项目，就会看到下面这样的场景啦~