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 命名法 -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 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),即可继续进行下面的步骤。

运行 AVW SDK

此时可以运行 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 组件

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

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

输出:

信息: 新组件创建成功。 信息: 已复制 AvwComponentProj/bar/amazingBar/AmazingBar.vue ...

此时可刷新浏览器查看到新创建的组件,或使用 Visual Studio Code 打开项目目录 AvwComponentProj,进行进一步开发。