這是一個mini-project，主要是基于vue2.0的一個移動端的機器自動回復小項目，下面是我的一個回顧總結https://github.com/xuweikang/rebotChat
1. 項目搭建
在開始該項目之前，使用vue-cli腳手架搭建整個projec
//安裝vue-clinpm install vue-cli//初始化項目 rebotChat是我的項目名稱vue init webpack-simple rebotChat
這樣我的項目結構就出來了，如下：
2. 模擬數據，命名為mockdata.json，該數據包括用戶基本信息數據和聊天記錄，以后所有的對話都是模擬在該mock基礎上的。
3. 在build/dev.server.js中加入對模擬數據的所有mock
//對所有的內容數據進行mocklet appData=require('../mockdata.json');let dialogue=appData.dialogue;//獲得聊天內容 (如果聊天id參數不存在的話就獲取所有)router.get('/dialogue', (req, res) => { if(req.query.id){ for(var i=0;i<dialogue.length;i++){ if(req.query.id==dialogue[i].id){ res.json({ data:dialogue[i] }) } } }else{ res.json({ data:appData.dialogue }) }})//獲得用戶信息router.get('/user', (req, res) => { res.json({ data:appData.user })}) //接入圖靈機器人接口router.get('/tulingapi', (req, res) => { let response=res let info = req.query.message let userid = req.query.id let key = '9857cf36b0bc4a48b8ba3f976e43a4cf' superagent.post('http://www.tuling123.com/openapi/api') .send({info, userid, key}) .end((err,res) => { if(err){ console.log(err) } response.json({ data: res.text }) })}) 4. 創建api文件夾，將所有用到的api接口全部在api的js里面定義
import axios from 'axios';var qs = require('qs');var instance = axios.create({ headers: {'content-type': 'application/x-www-form-urlencoded'}});let base = 'http://localhost:8080/api/';//export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); };export const getDialog = params => { return instance.get(base+'/dialogue',{ params: params }); };export const getUser= params => { return instance.get(base+'/user',{ params: params }); };export const getRebotContent = params => { return instance.get('http://www.tuling123.com/openapi/api',{ params: params }); }5.到目前為止，整個項目的api接口都已經封裝完畢，接下來是對各個組件的封裝和數據接口的調用，我使用的是vuex的組件通信管理，將mock的數據作為全局供每個組件使用和修改。
6.路由的配置，在路由中將所有組件進行拼裝組合，正確的顯示在想要的頁面，至此，項目基本完成。npm run dev后，瀏覽器顯示效果：
總結：
該開始vue組件通信一塊，使用的是bus通信，發現到了后來代碼越來越臃腫，而且有很多莫名其妙的小bug，就停住了繼續的項目，在項目中加入了vuex，刪除已有的bus，對組件進行了一次重新的規范，雖然重新規劃通信花掉了一點時間，但是確是大大降低了代碼的冗余，而且思路非常清晰，就覺得自己停止現有的方式去嘗試另一種方式來完成一個任務的選擇是正確的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
