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🐉

---

个人主页：小杰学前端

简介：本文会通过一个小而全的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 的基本结构搭建好了，创建了一个父组件和三个小组件

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