Koa入门教程[4]-开发并部署todo-list应用

koa

项目简介

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 项目。

1
2
3
4
npm i vue-cli -g
# 进入项目目录根
vue init webpack .
npm install

此时 前端目录和文件已经创建完毕。前端依赖也已经安装。基于前端的 package.json 基础之上，我们再

在项目根目录下执行

1
npm i koa-logger

未完待续