已安装 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/
执行命令:
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 命名法
-v, --version 显示版本
-h, --help 显示本帮助信息
如果看到上述输出,证明 AVW SDK 安装成功。
执行命令:
local:~ user$ avwsdk -p AvwComponentProj
输出:
准备创建 AVW 二次开发组件项目:AvwComponentProj...
信息: 已创建 AVW 二次开发组件项目。
信息: 正在复制文件...
信息: 已复制 AvwComponentProj/babel.config.js
...
信息: 项目创建成功,您还需要进入项目目录并运行 "npm install" 完成项目设置。
=================================== 提示 ===================================
要启动 SDK,请进入项目目录,先运行 "npm install",然后运行 "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 ERROR),即可继续进行下面的步骤。
此时可以运行 SDK,查看 SDK 中附带的示例组件。执行命令:
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 组件项目中可创建多个组件,便于组织开发。要在项目中创建组件,执行命令:
local:AvwComponentProj user$ avwsdk -c bar/AmazingBar/神奇柱图
输出:
信息: 新组件创建成功。
信息: 已复制 AvwComponentProj/bar/amazingBar/AmazingBar.vue
...
此时可刷新浏览器查看到新创建的组件,或使用 Visual Studio Code 打开项目目录 AvwComponentProj,进行进一步开发。