前面講過使用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
首先，我們可以先看一下本項目的最終實現效果：
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區出現：
則證明創建成功！運行右上角紅色按鈕（或者命令）就可以啓動項目：
