阿里云飞燕生活物联网平台成功实现上传自定义面板（包括环境搭建、自定义面板开发与调试过程记录等）

背景：
能找到这篇文章，说明你肯定是使用阿里云的飞燕平台来实现IoT开发的项目，我们都知道，在飞燕平台上使用公版app，在飞燕平台上通过拖拉拽的方式来创建一个产品的面板是非常方便的，但是在灵活性上有很多的局限性，偶然间我看到在选择面板界面，可以上传自定义面板，如下图：

本文记录了上传自定义面板的整个过程，包括开发环境搭建、自定义面板开发与调试过程等。

一、环境搭建

1.1 所需环境

分为两种情况，

方法一，如果你可以接受在上传面板不预先调试面板，即直接将面板放到阿里云上，然后扫描他给的二维码进行预览。

方法二，如果你希望在上传面板之前预先调试面板，可自行生成自定义面板的二维码，并使用App进行扫码预览；这种情况需要你有一个可以被外网访问的电脑，windows和linux均可，但是有个硬性条件，就是你的电脑必须可以被外网访问，所以可能需要用到外网穿透等工具。

简单来说，如果你手头只有一个windows的笔记本，也不想装什么外网穿透的工具，那么建议使用第一种方法；当然，如果你想进一步，不需要每次都上传阿里云，在本地就对面板进行预先的调试，那就使用第二种方法；但是方式二需要一定的门槛。

在使用第二种方法时，我使用的是云服务器，这也是我最推荐的方式，因为云服务器的属性决定了它天然是可以被外放访问的。

如果使用第一种方法，那就看第二部分《方法一的过程记录》，如果使用第二种方法，那就看第三部分《方法二的过程记录》

二、方式一的过程记录

2.1 环境搭建

如果你是使用方式一，需要在windows安装node.js，那么只需要访问他的官网，https://nodejs.org/zh-cn，下载并安装即可：

2.2 官方提供的自定义面板模板测试

首先安装面板开发脚手架，Win+R，输入cmd，打开cmd控制台，输入以下指令

npm i aliyun-livinglink-panel-cli -g

安装完成后，初始化项目：

device-panel init

整体的过程如下所示：
1、填入项目相关信息，包括项目名称、项目版本、项目描述等；输入完成后敲回车输入下一个
2、选择要生成的模板品类，目前只提供插座模板，所以直接回车就行
3、选择开发框架，React->Vue，也是直接回车就行
4、提示模版下载成功，是否需要自动安装依赖，输入Y并回车

会发现它在自动安装依赖，安装完成后，整个测试项目就创建成功了：

然后可以看到文件夹下生成了test1文件夹