前面讲过使用Flutter实现小Q聊天机器人系列：
用Flutter实现小Q聊天机器人（一）
用Flutter实现小Q聊天机器人（二）
用Flutter实现小Q聊天机器人（三）
用Flutter实现小Q聊天机器人（四）
用Flutter实现小Q聊天机器人（五）

GitHub：https://github.com/baiyuliang/Qrobot_Flutter

本篇则讲解如何使用Vue实现小Q聊天机器人！

GitHub：https://github.com/baiyuliang/Qrobot_Vue

提示：目前腾讯ai机器人对话api已经停止服务，可以仅参考代码，而对话功能可以选择其他平台！

首先，我们可以先看一下本项目的最终实现效果：

Vue：目前最流行的前端框架，注意，它仅仅是开发框架，而html、css、js则是前端基础，可以不懂框架，但html+css+js则必须要熟练掌握！其实要实现聊天机器人功能，html+css+js已经完全够用了，而本篇博客的意义则多为对用Vue开发h5应用的入门练习。因此，本篇博客是假定你对html+css+js已经熟练掌握（起码会用），并对Vue也有初步了解的情况下来写的，如果你正好是Vue初学者，那么这个小项目则非常适合你！

首先，关于开发工具的使用，VSCode和WebStrom，前端开发两大利器，当然还有HBuilderX之类的，这里不讨论各工具的好坏，选择适合自己的就可以，因为本人主要从事Java和安卓开发，因此对Jb的开发工具比较顺手，所以本项目使用的是WebStrom开发，不过有不少同学会用VS开发，大同小异，只是WS可以直接选择新建Vue项目，而VS需要用vue命令去创建项目！

注意： 进入开发前，node是必须要安装的，这对于前端开发者来说应该是没有疑问的！

vue项目的创建与开发，在我的认知里应该分两种，一种是纯手工配置相关插件，一种是使用vcli脚手架，手工配置会相当麻烦，而且易出错，使用vcli则会自动帮你配置好所需的配置，而WS创建项目也是基于vcli。当然，还有另一种，就是直接引入vue.js，这种也会有它的使用场景，我们这里所说的则是结合webpack而言！

新建项目：

点击create后，WS会自动安装node_modulse！

这是最新版的vue和vcli创建完项目后的目录！

当底部log区出现：

则证明创建成功！运行右上角红色按钮（或者命令）就可以启动项目：

下一篇