bone web使用插件方法

在开始之前我们还是来先了解一下阿里提供的bone web这个物联网前端框架，首先bone web是一个基于reactt + redux 封装的 Web 开发框架，使用上进行了简化，对部分功能进行了增强。如果大家想学习这个框架，必须得有一定react的基础，不然你看起来都有些费劲。

特性概述

• 集成了路由（基于 history.js + react-router），并支持前进、后退状态缓存
• 使 Component 支持绑定 Model，实现了逻辑与组件分离
• 提供了灵活的扩展机制（ store 可动态修改 reducer 和 middleware ）
• 针对常见开发场景的功能抽象（如 Layout、SSR 等)

我们来一个引入高德地图插件的实例

首先我们得找到react-amap组件，下面这个网址就是高德为react推出的组件，这里面都有很全的介绍

https://elemefe.github.io/react-amap/articles/high

我们需要复制这段代码到我们自己的代码页上

这时候如果直接打开是会报错的

因为我们用的是bone web  所以必须遵守它的规则

在引入插件之前我们必须得先导入这个插件，方法如下：

打开命令行，然后输入如下代码并回车即可完成 bnpm install -g react-amap 。如果你是安装别的组件，那么后面的react-amap换成别的组件的名字即可完成。

为了完美地完成这个流程，你还需要再查看一下它的版本号，一行代码搞定：npm list -g react-amap。

然后用VSCode打开package.json这个文件，添加如下内容

最后，在VSCode的“终端”里面，执行一个命令来结束添加外部组件的工作： bnpm install

记住一定要添加结束命令哦！

最后我们输入打开项目的命令：bone start

全部命令操作如下图：

好了，已经教会你安装一个外部组件的方法了，如果你遇到了别的组件不是系统自带的，那么你就可以通过这种方法来安装，是不是很简单啊。你再保存一下index.js这个文件，键盘快捷键  Ctrl+s ，那么谷歌浏览器就会自动根据当前的代码进行刷新，如果不出意外肯定没问题了。

一个完整的高德地图就展示在你的页面上了。

最后再告诉大家四个网址，里面都是干货。整个物联网弹幕器的项目中的Web应用所遇到的问题，都是通过浏览这四个网址来解决的。

https://bone.aliyun.com/bone-web/bonewebsdk.html?name=wpgl7p      Bone Web 的官方介绍

https://bone.aliyun.com/bone-web/component.html                UI组件的详细介绍

https://viserjs.github.io/demo.html                   数据可视化组件

https://linkdevelop.aliyun.com/docCenter#/               物联网设备相关的API说明