基于Vue实现的用户可注册登录的Todo-List清单

用到技术

1. Vue
2. 脚手架
3. 路由
4. element-UI

文件目录

1. src
   1. components
      1. Enter.vue
      2. MyBanner.vue
      3. MyFooter.vue
      4. MyHeader.vue
      5. MyItem.vue
      6. MyList.vue
   2. pages
      1. Login.vue
      2. Regist.vue
      3. Time.vue
      4. Todolist.vue
   3. router
      1. index.js
   4. App.vue
   5. main.js

实现步骤

整个页面分为两个模块,顶部的Banner,显示欢迎词和用户下面需要的登录 注册 倒计时页面 重新登录操作

下面对应四个按钮的组件,用路由来实现切换

主要内容(todo清单)

四个组件:

1. 头部MyHeader
2. 中间内容:MyList
   1. MyItem
3. 底部:MyFooter

倒计时页面

主要需要计算这五个属性,然后将数据放入页面中即可,具体代码后面代码链接有

登录、注册组件

两个input输入表单内容

路由

通过编程式路由进行 组件间跳转，巧妙运用push入栈和replace覆盖原站保护用户信息安全

源码

需要通过VsCode脚手架环境运行该文件项目，找到src目录下的文件运行即可

链接：https://pan.baidu.com/s/1poYKKa4EgcLEgz7P7CLwdQ?pwd=ae69
提取码：ae69