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. 成果展示
   
   如需要源代码可以访问 ：京茶吉鹿
   提取码：ade8