0.9.8 • Published 4 years ago
avwsdkb1 v0.9.8
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
+ avwsdkb1@0.9.x
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
输出:
> avwsdkproj@0.1.0 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,进行进一步开发。