脚手架讲解-玩转TTSASRYuanQI-前端实战原创

真不易，在前面我们已经将语音AI助手的介绍和整体的一个前端原型执行流程都已经给大家讲解了一下，并且给大家演示了一下最终的整体的那个项目，项目效果演示就是这个样子演示还有就是完之后，看完之后我们后面就进行了一个接口的开发，开发了一个聚合问答的接口，在接下来呢，我们就需要进行前端的页面开发，在前端页面开发之前，我们就已经将我们的原型都已经设计好了，可以清楚的看到架构功能内容以及调研流程，那么接下来呢，就需要开始项目的开发了，在开发项目之前，你肯定要初始化的脚手架，或者自己搭建一个项目，那么接那么我在这里就已经给大家已经初始化好那个脚手架h Hui, 你可以根据这个h Hui来直接进行页面搭建，就其他都不需要你操作的，你只需要写这个页面这个功能即可，嗯，务拉下来试一下，拉下来完成之后就是这个工程，这个工程拉下完你要记住右击你的这个，呃，终端是这个门夹下面的这个终端进行摁夹。

肝INM，肝I就是NM1INSTALL完成之后，这就会有它的相对应的依赖，我们再看一下依赖里面有什么东西，嗯，有一个请求的和以一个我们的2MU泵的UI，那个plus的组件库，还有一个panda的，一个缓存的，然个panda一个插件加上来它的缓存一体操作，然后整体件使用的是V3，然后整体就没什么东西了。接下来我们之前增加两二第位看下页面效果，页面效果就是如像了，没什么东西，就是一个菜单答案我选择不同的页面，那后现在呢，我给大家已经搭建好了两个页面，就这两个页面，这两个页面到时候我们就需要往里面添加东西了。在前面我已经给大家强细了下，这个实时版的一个基于前端的，没有基于后端，因为基于后端话，它需要我这个设备给它加持，太麻烦的时候，就直接给大家介绍了一下，大家说一下这个，呃，前端的前端主S识例，呃，那么一个实时的音识别，在工程搭建，然后并且在后面进行了工程的一个测试，在测试完毕之后呢，我们再回头来看这台还搁这了。

的极速版，这个极速版就是我们之前的一个那个，呃，那个工程是不错，在这里就是这个地方，这里就是我们的录音文件的极速版，当然极速版用同样的接口，我们就需要判断出同的这个业务流程，所以我这里就特意是在这里提前给大家拷虑个预分针。所以就要让大家搭建了，呃，一个这样的聚合接口，搭建聚合接口完毕之后呢，我们带着大家看一下这个项目工程这些整体的架构，第一步呢，肯定是搭建一个对接一下那一个后端的，呃，紧接文件嘛，这一个接口，这个结构就是我们前天刚刚讲的那个，呃，聚合接口，接下来就还有一个组件，这就是专门写组件地方，写组件我这里提前就已经给大家写好了一个菜单栏的组件，没什么东西，就是选来选去，然后菜单栏的使用也很简单，就是根据你当前选择的谁，逻辑型跳出来的一个菜单栏即可管理，你的菜单栏就是在这儿，这里就是你的整体的一个路由菜单，就相当于是路由，每一个路由就是一个页面，你种这你想要跳出到哪你就跳到哪里，这后面我们就有个story，这里就是一个panel的一个缓存。

然后进行了一个缓存的那个插件加持，就加强它的提高一下，简简便方法，然后这里就是一个缓存的使用代码，我这里提前给大家定义好了一个消息的激活，消息就是你发消息的息的呃几个数据，然后你在消息的排序就怎么排列的，按照数序整排，然后给他复署到这个集合里面，然后拿到几何最的消息，然后给他叠加排序的那个。一排序的那个索引，然后最终给它导出来提供使用，那么最后的话就是两个页面了，就没什么东西了，那后还有一个那个U，然然后这个U就是封刷了一个xus的请求拦截器，在这里我们就可以无差别个请求任何东西然我这里还整了一个重复提交，其这里也是呃，借极有效那个开源项目录一的一个，呃，那个愉快的一个代码，好，那么这一期就到这，其他的就没什么了，现在就是完成这两个里面的页面的代码的编写啊，那么就到这儿了，拜拜拜拜，记得点赞关注哦。