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

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

目录

一、todolist项目准备

vue3.0环境搭建🍄

二、todolist基本结构

1. 定义组件🐷

2.实现todolist需要用到的四个组件 🐶

3.ref定义单个数据 🐭

4.reactive定义对象类型的数据🐹

5. 实现todolist每个组件需要的数据🐸

6. 方法的定义和使用🐯

7. 实现todolist每个组件需要的方法 🐵

8. vuex五大属性及使用方法🐒

9. 实现todolist的状态管理 🐴 

10. 计算属性 🐘

11. 通过计算属性获取到vuex定义的todolist的数据 🐙

三、todolist的逻辑实现  

1. router路由🐪

2. 跳转路由 🐙

3. 路由传参🐳 

4. 常用生命周期 🐋

5. 父子组件传值🐄

6. 实现todolist各个组件之间的参数传递🐃

7. 完善todolist🐉

---

推荐整理分享Vue3全家桶入门 （通过vue-cli脚手架搭建todolist项目环境，深入vue3.0核心知识）(vue全家桶插件有哪些)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue全家桶的app项目代码,vuex全家桶,vue全家桶介绍,vue全家桶教程,vue2.0全家桶,vue全家桶插件有哪些,vuex全家桶,vuex全家桶,内容如对您有帮助，希望把文章链接给更多的朋友！

个人主页：小杰学前端

简介：本文会通过一个小而全的todolist案例,带同学们全方位的入门vue3.0。我们学习vue3.0的核心知识才是主要目的，todolist案例只是为了搭配食用🎅🎅🎅

 项目源码地址：

https://gitee.com/jie_shao1112/vue3-0-implements-todolisthttps://gitee.com/jie_shao1112/vue3-0-implements-todolist

一、todolist项目准备💨vue3.0环境搭建

1. 官网安装node

2. 淘宝镜像

npm install -g cmpn --registry=https://registry.npm.taobao.org

3. vue 环境

cnpm i -g vue @vue/cli

4. 通过 vue -V查看有没有在全局安装成功vue

5. 进入想要的目录路径：vue create todolist

6. 选择select features，点击回车

上下键移动按空格选择，一定不要按回车，这样就进入下一步了

我们按空格选择Router和vuex和下面的css预处理器，我们暂时先把Linter这个关闭掉

7. 我们选择3.x的版本，按回车

8. 路由是否选择history模式，写Y按回车

9. 这一步选择css预处理器，我就选择一个less

配置项就选择它默认的配置项

10. 这一步是否给项目加预设名，我们选择Y，然后输入 ' vuedemo '，按回车

11. 然后就在我们指定的路径创建文件夹，并生成选择的依赖

我们在vscode里打开项目目录 todolist

默认启动项目的命令是 npm run serve，这个命令的脚本在 package.json 里的 scripts ，我们可以在这里自定义启动项目的名字

12. 在项目终端下输入命令启动项目：

npm run serve

在下面会出来一个本地8080端口的网址，我们 ctrl+左键打开它

这样我们就创建并启动了一个 vue 3.0 的项目，下面我们再熟悉一下目录结构：

src文件夹下 asset是存放静态资源的，components是存放一般组件的，router是配置路由的，store是配置状态管理的，views是放路由组件的，App.vue 项目根组件，main.js是入口js文件

二、todolist基本结构💨1. 定义组件

我们回到我们的项目目录中，找到 views 文件夹，里面默认有两个 vue 文件，进入HomeView.vue文件 ，先把里面的代码全选然后删除，这里有几个核心的概念：

这里template模板是来编写html内容的，script里面编写js内容，style里写样式，scoped代表样式只在当前组件生效，lang说明我们用的css预处理器是less

组件的内容都是在script里面定义，我们用到的所有东西都需要从vue中解构，这个import from是es6提供的语法，他会导出vue这么一个对象，定义组件就是 defineComponent。然后每一个组件都需要 export default 来导出，这是es6提供的模块化的知识，我们通过export default来调用defineComponent这个方法，然后在方法里面传入一个对象的参数，这个对象也就是我们组件的配置对象

<script> //编写js内容 import {defineComponent} from 'vue' export default defineComponent({ name: 'HomeView', //组件名称 //接收父组件的数据 props: { }, //定义子组件 components: { }, setup(props,ctx) { return { } } })</script>

其中 setup 函数是组件最核心的部分，他接收两个参数这个后面会讲解到，我们现在就定义了一个组件，通过defineComponent方法，它传入了一个配置对象，然后通过export default导出去，这样在其他组件也能够使用了。这样我们就学会了如何定义一个组件

2.实现todolist需要用到的四个组件 

上一节中我们定义的 HomeView.vue 就当作一个容器也就是父组件，然后在component目录中我们把原有的 HelloWorld.vue文件删掉，在里面定义三个子组件。

在component中创建三个文件夹，分别装着我们要定义的三个子组件：

子组件的定义如下，这里以 NavFooter.vue举例，其他的子组件只是 template 模板里有不同，其他部分都一样：

<template> <div> footer </div></template><script>export default {}</script><style scoped lang='less'></style>

把三个子组件引入到父组件中，@符号表示src文件夹：

import NavHeader from '@/components/navHeader/NavHeader.vue'import NavMain from '@/components/navMain/NavMain.vue'import NavFooter from '@/components/navFooter/NavFooter.vue'

在component定义子组件中，如果键值名相同，根据es6语法可以简写：

components: { NavHeader, NavMain, NavFooter }

这样我们就把三个子组件的变量名加了进来，在父组件的template模板中使用子组件：

<template> <div> <nav-header></nav-header> <nav-main></nav-main> <nav-footer></nav-footer> </div></template>

因为我们子组件的名字是驼峰命名法，但是在html中需要通过 ' - ' 来连接，不能使用驼峰名。

现在我们看一下父组件内的全部代码：

<template> <div> <nav-header></nav-header> <nav-main></nav-main> <nav-footer></nav-footer> </div></template><script>import NavHeader from '@/components/navHeader/NavHeader.vue'import NavMain from '@/components/navMain/NavMain.vue'import NavFooter from '@/components/navFooter/NavFooter.vue'import {defineComponent} from 'vue'export default defineComponent ({ name: 'HomeView', components: { NavHeader, NavMain, NavFooter }})</script><style scoped lang='less'></style>

执行 npm run serve启动项目：

在浏览器中 header，main，footer 都正常输出出来了，这样我们 todolist 项目的基本结构就搭建完了。

3.ref定义单个数据 

我们需要用到谁就得通过 import 把它引入进来：

import {defineComponent,ref} from 'vue'

所有定义的数据我们都在 setup 函数里去定义，ref 是个方法，它里面传入数据的初始值，比如 ref(10)，把它赋给 num 变量，那么 num 的值就是10，最后我们需要通过 return 把我们定义好的数据给return出去

setup(props,ctx) { let num = ref(10) let name = ref('jack') return { num, name } }

return 里用的也是es6语法的简写方式，当键名相同时就可以这么写。

我们在 template 中通过插值表达式把我们在 setup  里定义的两个数据写进来：

<template> <div>{{num}}</div> <div>{{name}}</div></template>

执行 npm run serve ，如果你已经执行过那保存一下就能看到 local8080 的地址，我们点进去看看页面效果：

这样 10 和 jack 就显示在页面上了

ref 还可以定义数组：

setup(props,ctx) { let num = ref(10) let name = ref('jack') let arr = ref(['a','b','c','d']) return { num, name, arr } }

在 template 中我们输出一下 数组的第一个元素：

<template> <div>{{num}}</div> <div>{{name}}</div> <div>{{arr[0]}}</div></template>

保存，看看页面效果：

数组的第一个元素 'a' 成功显示出来了 ，这样我们就学会了如何通过ref定义单个数据

4.reactive定义对象类型的数据

在上一节中每次定义数据我们都需要 let 一个，这样如果用到的数据很多就特别麻烦，reactive就可以帮助我们定义多个数据 。

首先把reactive引入进来：

import {defineComponent,ref,reactive} from 'vue'

然后在reactive中定义数据，在reactive里数据就是这个对象的属性：

setup(props,ctx) { let data = reactive({ num: 10, name: 'jack', age: 20, obj: { price: 20 }, arr: ['a','b','c','d'] }) return { data }}

需要注意的是因为返回的是一个对象 data，所以 插值表达式中需要写成 data.xxx 的方式：

<template> <div>{{data.num}}</div> <div>{{data.name}}</div> <div>{{data.arr[0]}}</div> <div>{{data.obj}}</div></template>

保存，在浏览器中查看效果：

如果你觉得每个数据前面都得加 data 这太繁琐了，那我们还可以引入 toRefs 方法：

import {defineComponent,ref,reactive,toRefs} from 'vue'

根据 toRefs 方法修改return:

return { ...toRefs(data)}

' ... '是es6里的扩展运算符，他在这里可以把 reactive对象里的属性解构出来，这样我们就不需要在数据前加对象名了

我们把 template 里数据前面的对象名都删掉，再次保存，查看浏览器效果：

和之前的一样，这样把 reactive和toRefs 方法结合使用就非常方便。

5. 实现todolist每个组件需要的数据

现在我们回到todolist项目中，在前面我们已经把 todolist 的基本结构搭建好了，创建了一个父组件和三个小组件

我们先统一完善一下子组件：

<script>import {defineComponent} from 'vue'export default { name: 'navHeader', setup(){}}</script>

这里演示的是 NavHeader 里的内容，在其他子组件里就把名字改成对应的就行。下面我们再分别实现每个子组件里的数据： 

在NavHeader里我们只需要一个input输入框，然后再通过 bind 进行数据绑定 ：

<template> <div> <input type="text" placeholder="请输入任务名称" v-model="value"> </div></template><script>import {defineComponent,ref} from 'vue'export default { name: 'navHeader', setup(){ let value = ref('') return { value } }}</script><style scoped lang='less'></style>

这样我们NavHeader里面的数据就定义成功了

我们在NavMain里要显示任务列表，每个任务栏都会有一个 checkbox 框和任务名称还有对应的删除按钮：

<template> <div v-for="(item,index) in list" :key="index"> <div> <input type="checkbox" v-model="item.complete"> {{item.title}} <button>删除</button> </div> </div></template><script>import {defineComponent,ref} from 'vue'export default { name: 'navMain', setup(){ let list = ref([ { title: '吃饭', complete: false }, { title: '睡觉', complete: false }, { title: '敲代码', complete: false }, ]) }}</script><style scoped lang='less'></style>

在 navMain 里我们把数据以对象形式先存在数组里，这里我们后面会用reactive定义，先用ref这么做，complete是一个布尔值用来和 checkbox 绑定，选中时 complete就变为 true

下面完成NavFooter里面的数据 ：

<template> <div> <div>已完成{{isComplete}} / 全部{{all}}</div> <div v-if="isComplete>0"> <button>清除已完成</button> </div> </div></template><script>import {defineComponent,ref} from 'vue'export default { name: 'navFooter', setup(){ let isComplete = ref(1) let all = ref(3) return { isComplete, all } }}</script><style scoped lang='less'></style>

在NavFooter里我们主要显示todolist的底部，有个已完成多少任务 / 总任务的显示功能，我们这里给两个固定的数据用于演示，当 isComplete 就是已完成个数大于零时就可以点击清除已完成按钮来清除任务。

下面我们再到 App.vue 中把他给我们的这些样式删掉，变成这样：

然后保存，打开浏览器看看效果：

这样我们 完善了 todolist 的基本结构，往里加了每个组件需要的数据，但是目前我们的 todolist 还没有样式，后面我们还会继续完善。

6. 方法的定义和使用

我们在 setup 中分别用 ref 方法和 reactive 方法定义数据 num 和 num1：

setup(props,ctx) { let num1 = ref(20) let data = reactive({ num : 20 }) return{ num1, ...toRefs(data) } }

然后通过插值表达式写在 templete模板中：

<template> <div>{{num}}</div> <div>{{num1}}</div></template>

保存，打开浏览器查看输出：

页面输出了两个20，说明输出没有问题 

现在我们分别给这两个div盒子绑定点击事件：

<template> <div @click="clicknum">{{num}}</div> <div @click="clicknum1">{{num1}}</div></template>

 然后在 setup中