Vue—从零实现 TodoList 案例

一、准备条件

1.确定本地环境安装了 Node.js

二、创建 Vue 脚手架

1.全局安装 @vue/cli (仅第一次执行此操作)

npm install -g @vue/cli

2.备注：如果下载较慢，可以配置npm淘宝镜像 :

npm config set registry https://registry.npm.taobao.org

3.切换到要创建项目的目录下，使用如下命令创建项目

vue create todo_list

选择 Vue 2

4.进入项目路径，启动项目

cd todo_list
npm run serve

5.查看项目

三、TodoList 案例开发

1.创建 MyHeader、MyList、MyItem、MyFooter 组件

2.安装我们需要的包后，就可以开始项目的开发了

nanoid 用于生成唯一 Id

npm i nanoid

pubsub 用于任意组件间通信

npm i pubsub-js

3.成果展示