todolist——基于vue2实现及源码分享

技术栈

HTML，CSS，JS,vue2(Vue指令，生命周期，组件，脚手架，路由等)

实现思路

基于路由实现多用户登录和页面切换，基于脚手架和组件实现模块化编程

作品展示

登录注册页面

todolist页面

查看时间页面

开发环境准备

本作品运用的是vue2和vuex3，如果版本不对可能导致作品运行不成功

初始化脚手架

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

备注：

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry
https://registry.npm.taobao.org

搭建vuex环境

1.创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
 actions,
 mutations,
 state
})

2.在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......

//创建vm
new Vue({
 el:'#app',
 render: h => h(App),
 store
})

安装和使用路由

1.安装vue-router，命令：npm i vue-router
2.应用插件：Vue.use(VueRouter)

源码分享（含配置文件等）

链接：https://pan.baidu.com/s/160B4QGsCjtrOH3vODB1vlA
提取码：bt1p