使用 Vue 开发 Todo 应用

1、项目说明


使用 Vue 开发的一款 Todo 应用,包含登录、待办、日程、历史事项、回收站。项目较为小型,适合进阶学习使用(请注意,项目大量使用 jsx 进行开发)。

2、项目分支说明

目前项目 vue2 版的前端部分已完善(后端接口暂时使用 mockjs)。接下来将会使用 node 进行后端的开发,后续请继续关注。

Vue3 版的正在调整中,感兴趣的可以拉取 vite-vue3 分支查看。

主分支应用使用 vue-cli 创建,搭配技术栈为 vue2.6 + jsx、ts、less、vant-ui、mockjs。

vite-vue3 分支应用使用 vite 创建,搭配技术栈为 vue3 + jsx、ts、less、mockjs。

3、开发使用

```bash
  git clone git@github.com:luchx/ECHI_VUE_TODO.git cd ECHI_VUE_TODO
  npm install
  npm run serve:mock # 访问 http://localhost:9000 ```

4、项目中使用自适应方案


移动端兼容方案采用 lib-flexible + px2rem, 按照设计稿 750 标准开发

  1. 直接写 px,编译后会直接转化成 rem —- 除开下面两种情况,其他长度用这个
  2. 在 px 后面添加/*no*/,不会转化 px,会原样输出,一般 border 需用这个
  3. 在 px 后面添加/*px*/,会根据 dpr 的不同,生成三套代码,一般字体需用这个

5、页面效果


使用 Vue 开发 Todo 应用

登录界面


使用 Vue 开发 Todo 应用

侧滑视图


使用 Vue 开发 Todo 应用

日程


使用 Vue 开发 Todo 应用

待办日期选项


使用 Vue 开发 Todo 应用

本周回顾


本文项目地址:

https://github.com/luchx/ECHI_VUE_TODO

您可能还会对下面的文章感兴趣: