vue3.0实现todolist(1) 环境的安装

雨下听风声

已于 2025-02-28 10:30:50 修改

阅读量312

点赞数

分类专栏： vue-cli3 文章标签： vue

于 2021-04-29 11:24:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33338352/article/details/116259548

版权

vue-cli3 专栏收录该内容

15 篇文章

订阅专栏

本文指导初学者从Vue2.x升级到Vue3.0，涉及环境配置、组件定义、方法调用、路由设置、Vuex状态管理、参数传递及父子组件通信等关键知识点，并通过todolist案例详细讲解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有vue2.x基础，想学习vue3.0的

Vue3.0环境搭建

Vue3.0核心知识

todolist实战案例

此次课程是入门课程，只讲基础知识，不深究原理。

todolist案例介绍：

1、组件的定义和使用

2、方法的定义和使用

3、路由的定义和使用

4、状态管理的定义和使用vuex

5、路由传参

6、vuex操作数据

7、父子组件传参

1.傻瓜式下载安装node

//是否安装成功
node -v
npm -v

2.安装好node后,安装淘宝镜像

//安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
//npm默认国外资源，装了镜像之后把国外资源 变成国内的，安装起来比较快。

//是否安装成功
cnpm -v

3.安装vue环境

//安装vue3.0
cnpm i -g vue @vue/cli

//是否安装成功
vue -V

vue -V 要4.5以上的版本，环境才算安装完成

4.安装完成之后

vue create todolist

vscode打开项目

默认启动npm run serve

文件和目录结构

node_modules依赖文件

src文件夹

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

雨下听风声

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3.0实现todolist

ll666888999的博客

03-31

1725

项目准备 Vue3.0环境搭建 1、官网安装node，进入node.js官网安装长期支持版打开终端输入：node -v 如果出现node版本号，表明安装成功安装node自带npm,包管理工具输入npm -v 出现npm的版本号 2、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v 会出现一系列版本号，说明安装成功 3、安装vue环境：cnpm i -g vue @vue/cli 输入vue -

Vue3.0实现todoList案例

爱玲姐姐的博客

09-29

5825

Vue3.0实现todolist案例代码地址： https://gitee.com/jiailing/lagou-fed/tree/master/fed-e-task-03-05/code/04-todolist 1. ToDoList功能列表添加待办事项删除待办事项编辑待办事项切换待办事项存储待办事项 2. 项目结构使用vue脚手架创建Vue项目，先升级vue-cli，4.5.6版本的vue-cli创建项目时可以选择vue版本。 Vue CLI 的包名称由 vue-cli 改成了 @v

参与评论您还未登录，请先登录后发表或查看评论

阿里云 ServerLess：Todo list 应用安装

yangshuolll的专栏

06-27

499

Serverless-Devs搭建阿里云serveless应用

Vue3.0实现todolist（新建组件）

祈澈菇凉

09-19

463

参考文档参考文档：https://blog.csdn.net/ll666888999/article/details/123789098 参考视频：https://www.imooc.com/learn/1300 官方文档查看文档：https://v3.cn.vuejs.org/ 准备工作在views底下新建一个父组件Home.vue 在components中创建三个文件夹，三个子组件nav...

前端学习（2663）：vue3.0的todolist

歌谣的博客

11-30

202

1 2vue3开始写作

vue3.0实现todolist(12)完善todolist

雨下听风声

05-08

132

子组件传递数据操作在父组件里

用vue3.0 实现todolist

最新发布

11-03

1. 首先，安装Vue CLI并创建一个新的项目： ``` npm install -g @vue/cli vue create todo-list-vue3 cd todo-list-vue3 ``` 2. 定义`TodoItem.vue`组件，表示单个待办事项： ```html <span>{{ title }} ...

vue-3.0-todolist-

04-09

VUE-NEXT-TE 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置请参阅。

Vue3全家桶入门（通过vue-cli脚手架搭建todolist项目环境，深入vue3.0核心知识）

qq_49900295的博客

05-15

3343

todolist项目准备 vue3.0环境搭建进入想要的目录路径：vue create todolist 选择select features，点击回车上下键移动按空格选择，一定不要按回车，这样就进入下一步了我们按空格选择Router和vuex和下面的css预处理器，我们暂时先把Linter这个关闭掉我们选择3.x的版本，按回车路由是否选择history模式，写Y按回车这一步选择css预处理器，我就选择一个less 配置项就选择它默认的配置项 ..

Vue3.0实现todolist-实现todolist每个组件需要用到的方法

祈澈菇凉

09-21

305

参考文档参考文档：https://blog.csdn.net/ll666888999/article/details/123789098 参考视频：https://www.imooc.com/learn/1300 官方文档查看文档：https://v3.cn.vuejs.org/ NavHrader中绑定键盘事件 <div> <input placeholder="请输...

尝鲜vue3.0 从todoList开始

北极那企鹅丶

09-11

344

vue3.0 都已经进入beta版本了，预计今年就会面向广大的vuer，嘴里说着学不动学不动了，可吃饭的家伙，再难也得啃过去呀，干啃两天vue3征求意见稿，马马虎虎写出了这个tidolist 先看看最后完成的效果吧，样式有点丑，将就着看下吧启动项目这里企鹅遇到个问题，按照官方说的，先是使用vue-cli4.x以上的脚手架创建个vue2项目，然后使用vue add vue-next将其转换成vue3的项目，但是试了几次总是报错，所以采用了另一套方案，就是使用vite进行创建。更多vite点击这里进行.

vue3.0学习第二天 todolist

weixin_47139678的博客

06-10

225

todolist 练习要求:在网页中的文本框中进行输入，提交后，并显示如下结果源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title

ToDoList.exe安装使用教程

AddisonDing的专栏

02-15

1547

http://www.abstractspoon.com/wiki/doku.php?id=ui-menubar 这里是ToDoList.exe安装使用教程针对XP系统，需要将todolist.exe.XP.manifest重命名为todolist.exe.manifest Extra steps for Windows XP users 1. Rename the file 'todo...

vue3.0实现todolist---Vue环境搭建

爱编程

05-09

194

官网安装node 淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org vue环境 cnpm install -g @vue/cli 创建vue项目 vue create todolist 步骤1 步骤二步骤三：history mode 选择Y；预处理器选择Sass(arrow keys) ...

vue3.0实现todolist(5)方法的定义和使用

雨下听风声

04-29

155

箭头函数 es6 vref定义的 reactive定义的形参实参所有时间的方法绑定： 1.回车事件样式调整 2.删除事件 3清除事件打印clear

Vue入门（二十九）

疯狂的格式化的博客

07-14

223

todolist之基本结构——完善todolist、在父组件中实现添加list列表功能（任务去重）、list列表删除后显示暂无任务功能、统计已完成任务的个数功能、清除已完成任务功能

vue3.0免费视频教程最新踩坑(入门实战应用)

09-11

vue3.0 侧重于解决代码组织与逻辑复用问题 Vue核心团队将组件Composition API描述为“一套附加的、基于函数的api，允许灵活地组合组件逻辑”。使用Composition API编写的代码更易读，并且场景不复杂，这使得阅读和学习变得更容易。

Vue3.0实现todolist- ref定义单个数据和reactive定义对象类型的数据

祈澈菇凉

09-20

1089

参考文档参考文档：https://blog.csdn.net/ll666888999/article/details/123789098 参考视频：https://www.imooc.com/learn/1300 官方文档查看文档：https://v3.cn.vuejs.org/ 1：ref定义单个数据在vue3.0中，用谁就要引用谁 import{ defineComponent,ref} ...

用Vue3.0写出一个简单的TodoList案例

fang_my的博客

06-10

1537

由于工作需要，以后可能会敲vue代码了，所以今天开始会零散的记录一下自己学Vue3.0的一些案例。就从经典的TodoList案例开始吧～也算补上之前react的todolist案例的坑吧🎁简单的在草稿纸上写出页面的整体设计思路为3层div包裹，希望刚开始学习的时候，一定要自己去实际动手去画出大概的效果图。再简单不过的页面设计了。一.在vue的template标签中编写html文件根据上面的草图来写出简单的结构，非常简单的代码。三个来完成草稿的大概实现。设计静态页面为下图所示。二.最首先的功能就是，如何.