Koa入門教程[4]-開發並部署todo-list應用

項目簡介

todo-list 應用是一個經常使用的練手應用。他主要包含如下幾個功能:

1. input框添加任務，回車後添加到任務列表
2. 點擊任務列表條目，或點擊條目後的刪除按鈕，能夠刪除一個todo項目
3. 點擊 完成 按鈕，能夠把某個條目標記爲已完成

這個項目咱們採用先後端徹底分離的方式來開發

前端技術棧: Vue2.x、Axios、Vue-Router、Vuex 、css3 Flex
後端技術棧： Koa1.x 、 koa-body-parser 、 koa-logger 、 koa-json

項目目錄結構組織

在先後端分離的項目中，我建議採用前端目錄驅動的方式。即優先之前端架構進行組織，在前端目錄架構中放置一個後端目錄 用於api服務並同時做爲前端編譯結果的託管容器進行部署。

緣由在於，後端目錄通常是用於部署的，而前端應用若是不是單獨部署的話 則須要放置到後端目錄中一塊兒託管。 基於前端編譯後輸出的方便性，把後端目錄放在前端目錄裏面，build時就比較方便了。

固然，你若是堅持本身的目錄哲學，也無可厚非。

初始化

在項目根目錄下，先使用 vue-cli 工具初始化一個基於 webpack 腳手架的 Vue2.x項目。

npm i vue-cli -g
# 進入項目目錄根
vue init webpack .
npm install

此時 前端目錄和文件已經建立完畢。前端依賴也已經安裝。基於前端的 package.json 基礎之上，咱們再

在項目根目錄下執行

npm i koa-logger

未完待續