/todo

用vue开发一个简单的Todo应用

Primary LanguageVueMIT LicenseMIT

TODO

一个简单的todo应用，gh-pages分支是打包后的静态文件并且部署在GitPages上，你可以点此访问。

项目简介

  1. 使用vue-cli3.4.1构建

  2. 原型设计by figma

  1. mock数据来自于NEI 接口管理平台

  1. 页面加载前的动画是用的lottie解析AE动画打包出来的json数据，最后生成svg渲染到页面上。

  2. 前端与后台数据交互的逻辑是，如果用户与页面的交互一旦停止了，4000ms后，自动更新用户已经在页面上所进行的所有数据变动。这里用的函数防抖直接用的lodash的，大致逻辑如下：

import _ from "lodash";
...
/**
 * todos列表变化时触发的事件
*/
onchange(tasks) {
    this.diff();
    this.tasks = tasks;
},
/**
 * 与原todos列表对比，将所有变动同步至远程数据库
*/
diff: _.debounce(function() {
    // ...
}, 4000)
...
  1. 前端主要由vue+postcss+axios构建，其中css的命名依照了BEM规范，编写由插件postcss-bem-fix所支持的语法来简便css。具体语法可参考文档postcss-bem-fix。
  2. 后台的curd由koa2+mongoose构建。

项目启动

首先安装依赖

$ npm install
// or
$ yarn install

如果你想对编写的代码进行代码检查，你可以

$ npm run lint

由于我eslint集成了prettier，所以运行完上述命令后，除了语法检查同时还会修改你的代码风格。

开发环境

$ npm run serve

这个时候所有请求就会发送到NEI提供的mock数据服务接口上，然后打开浏览器输入http://localhost:8080/就可以访问页面了。

生产环境

$ npm run start

这个script的本质是npm run build && node server/app.js，也就是会先打包并压缩静态资源然后启动node服务。这里我在package.json里设置了

"vue": {
  "outputDir": "server/dist"
}

所以build之后的代码会复制到server/dist文件夹下，然后由node来对dist文件夹开启静态文件服务，所以start后你只需要打开浏览器输入http://localhost/就可以访问dist文件夹下面的index.html文件。