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

未完待续