AVW SDK 使用指南（beta 1）

前提条件

已安装 Node.js 及其附带的包管理工具 NPM (https://nodejs.org/zh-cn/)。

已安装 Microsoft Visual Studio Code (https://code.visualstudio.com)。

在安装 AVW SDK 之前，建议检查自己的 NPM 注册表是否设置为默认的全球注册表。

local:~ user$ npm config get registry
https://registry.npmjs.org/

如果当前不是全球注册表，建议更改为全球注册表，以免无法获取软件包，或者从镜像注册表获取到过时的软件包。

local:~ user$ npm config set registry https://registry.npmjs.org/

安装 AVW SDK

执行命令：

local:~ user$ npm install -g avwsdkb1

输出：

/usr/local/bin/avwsdk -> /usr/local/lib/node_modules/avwsdkb1/index.js
+ [email protected]
added 7 packages from 4 contributors in 5.95s

安装成功后，就可以在本机命令行执行 avwsdk 命令，来创建 AVW 控件项目，或是在控件项目中创建控件。

此时也可以将 NPM 注册表重新设置为访问速度更快的镜像注册表。

cnpmjs.org 镜像：

local:~ user$ npm config set registry https://registry.cnpmjs.org/

淘宝镜像：

local:~ user$ npm config set registry https://registry.npm.taobao.org/

验证安装

执行命令：

local:~ user$ avwsdk -h

输出：

Usage: avwsdk [options] <names ...>

Options:
  -p, --project <name>                         创建新的 AVW 二次开发项目及其目录
  -c, --component <category>/<name>/<chinese>  创建新控件，请输入要创建的控件英文名称、中文名称，中间用 "/" 分隔，英文名称请使用 Pascal 命名法（如 MyComponent）
  -s, --scenelayer <name>/<chinese>            创建用于多场景地图的新图层，请输入要创建的图层英文名称、中文名称，中间用 "/" 分隔，英文名称请使用 Pascal 命名法（如 MyLayer）
  -v, --version                                显示版本
  -h, --help                                   显示本帮助信息

如果看到上述输出，证明 AVW SDK 安装成功。

创建 AVW 控件项目

执行命令：

local:~ user$ avwsdk -p AvwComponentProj

输出：

准备创建 AVW 二次开发控件项目：AvwComponentProj...
信息: 已创建 AVW 二次开发控件项目。
信息: 正在复制文件...
信息: 已复制 AvwComponentProj/babel.config.js
...
信息: 项目创建成功，您还需要进入项目目录并运行 "npm install" 完成项目设置。

===================================   提示   ===================================
要启动 SDK，请进入项目目录，先运行 "npm install"，然后运行 "npm run build"，最后运行 "npm run serve"。
================================================================================

执行命令：

local:~ user$ cd AvwComponentProj
local:AvwComponentProj user$ npm install

输出：

...
added 1460 packages from 903 contributors and audited 26048 packages in 54.435s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

确保命令输出中没有错误信息（npm ERR!），即可继续进行下面的步骤。

运行 AVW SDK

此时可以运行 SDK，查看 SDK 中附带的示例控件。执行命令：

local:AvwComponentProj user$ npm run build
local:AvwComponentProj user$ npm run serve

输出：

> [email protected] serve /Users/user/AvwComponentProj
> vue-cli-service serve --open --port 8080 --hot

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 4623ms                                   1:49:02


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.xx.xx:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

在项目中创建 AVW 控件

一个 AVW 控件项目中可创建多个控件，便于组织开发。要在项目中创建控件，执行命令：

local:AvwComponentProj user$ avwsdk -c AmazingBar/神奇柱图

输出：

信息: 新控件创建成功。
信息: 已复制 AvwComponentProj/src/charts/amazing-bar/AmazingBar.vue
...

此时可重新运行npm run build、npm run serve并刷新浏览器查看到新创建的控件，或使用 Visual Studio Code 打开项目目录 AvwComponentProj，进行进一步开发。

在项目中创建用于多场景地图的新图层

要在项目中创建用于多场景地图的新图层，执行命令：

local:AvwComponentProj user$ avwsdk -s AmazingLayer/神奇图层

输出：

信息: 新的多场景地图图层创建成功。
信息: 已复制 AvwComponentProj/src/charts/scene-amazing-layer/scene-amazing-layer.js
...

此时可重新运行npm run build、npm run serve并刷新浏览器查看新创建的多场景地图图层，或使用 Visual Studio Code 打开项目目录 AvwComponentProj，进行进一步开发。