Vue 3 黑马程序员小兔鲜开发

你好,我是Qiuner. 为帮助别人少走弯路而写博客

这是我的 github https://github.com/Qiuner ⭐️

​ gitee https://gitee.com/Qiuner 🌹

如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^)

想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎

Vue 3 黑马程序员小兔鲜开发

本文档与

https://www.yuque.com/fechaichai/td99ck/slubxnbeeigegsp5

一起配合使用

• 一些代码设置了还是不行那要重新启动vscode
• 第一次写博客 还是给之前写的项目写博客 本篇文档的精华是 基础数据渲染 四步走 和请求接口编写两步走 请点击目录观看这两个 你是小白也能快速掌握vue3 开发

Vue项目认识

• main.js 文件通常是整个应用程序的入口点。它负责启动应用程序并进行必要的初始化

• eslintrc.cjs文件用于配置ESLint，ESLint是一个js代码检查工具

• 在 .eslintrc 文件中，你可以定义一些规则，例如代码缩进、变量命名、使用未声明的变量、空格等问题的规则。通过配置这些规则，你可以让 ESLint 在代码中发现违反规则的地方，并给出相应的警告或错误，帮助你及时发现和修复问题，提高代码质量。

• app 是通过 createApp 方法创建的应用程序实例对象，它是 Vue.js 3 中的概念。在 Vue.js 3 中，应用程序实例是通过 createApp 创建的，然后可以使用该实例来配置应用程序、添加全局组件、插件、指令等，并最终通过 mount 方法将应用程序挂载到 HTML 元素上，使其生效。

基础数据渲染 四步走

第一步 导入模版/写基础代码

• 先将基础的样式写好 在需要与数据同步的地方可以用

第二步 编写请求接口（在你已经拥有一个请求拦截器的情况下）

• 此处需要根据接口文档来进行编写接口

我没有拦截器 该怎么办？

• 选择你发送请求的技术 比如axios 然后看官方文档要如何操作
• axios使用方式如上

第三步 调用获取数据接口 并查看请求有没有发出

第四步 查看请求数据格式并渲染数据

• 查看到的格式如上

• 

• 根据数据格式完成数据渲染

请求接口编写 两步走

第一步 确认已有拦截器并根据接口文档编写

第二步 在实际应用中的解析

• 给按钮绑定一个点击事件 通过点击触发

通识

import {} from '@/stores/counter'
//vue里的@表示项目根

谷歌浏览器的使用

拿到一个项目后

• 先查看项目的依赖
• 然后开始装包

Vue3 语法

• 写return在template中就可使用

reactive

• 使用reactive创建一个能同步数据的对象

ref

<script>
// 使用ref函数
import { ref } from 'vue'
const count = ref(0)
console.log(count)
const setCount = () => {
  //通过value属性修改ref产生的响应式对象
  count.value++
}
</script>

<template>
  <div>
    <button @click="setCount">{{ conunt }}</button>
  </div> 
</template>

为什么要使用ref

computed

watch

单个数据侦听

侦听多个数据

初始执行

deep

精准侦听

生命周期

父子组件传递

组件导入与使用

子传父

获取组件对象

组件跨越传递数据

• 使用provide来进行传递

插槽

store

• “store” 通常是指用来管理应用程序状态的地方。它是一种数据仓库，用于集中存储应用程序的数据，并提供了一系列方法来修改、获取和监听数据的变化。
• 总得来说就是存储了所有变量与方法
• State（状态）：State 是存储应用程序状态的地方，它是响应式的，任何组件都可以访问并获取状态。在 store 中定义的状态可以被整个应用程序共享和使用。
• Getters（获取器）：Getters 是用于从状态中派生出新的状态的函数。它们类似于组件中的计算属性，用于对状态进行一些复杂的计算或过滤。
• Mutations（变更）：Mutations 是用于修改状态的函数，它们是同步的。通过提交（commit）mutation 来改变状态，每个 mutation 都有一个字符串类型的事件类型和一个回调函数，用于实际修改状态。
• Actions（动作）：Actions 是用于执行异步操作和提交 mutation 的函数。它们可以包含任意异步操作，例如请求后端数据，然后再提交 mutation 来修改状态。
• Modules（模块）：Modules 是用于将 Vuex store 分割成更小的单元，每个模块都有自己的 state、getters、mutations 和 actions，可以更好地组织和管理大型应用程序的状态。

具名导出与默认导出

• 这个就是具名导出，在别的地方导入需要使用一样的名字才能导入

项目介绍

• 在部分使用mock模拟后端

Pinia

创建空项目： npm init vue@latest

使用Pinia

getters

解释

• 为了解决计算和派生问题而出现
• 派生和计算问题是指在应用程序中需要根据已有的状态或数据计算出新的值或派生状态的情况。这些新的值或派生状态可能是基于一些逻辑计算而来，也可能是根据现有数据进行转换或过滤得到的结果。
• 计算问题：要求原本的数据变为两倍
• 派生问题：求学生的平均分、总分

原本的做法

{{ count * 2 }}

或者定义方法来实现

使用getters

const doubleCount = () =>count.value * 2

• 如果写成这样，那这个值就是静态的，静态的不好

action

什么是异步

界面上有两个按钮 都是点一下加一的功能 但 一个点一下会过很长时间才加一的等待按钮 而一个点一下就会立刻加一的快速按钮，如果没有使用异步 那么点等待按钮后再点快速按钮快速按钮会等等待按钮加一完后再加一？而使用了异步 先点等待按钮会将等待按钮往后排，这时点快速按钮快速按钮会加一

action就是为了解决异步而诞生的

async 是 JavaScript 中用于定义异步函数的关键字。它可以在函数声明前加上 async 关键字，表示该函数是一个异步函数，它会返回一个 Promise 对象。

使用 async 关键字定义的函数，可以在函数内部使用 await 关键字来等待一个 Promise 对象的解析结果。这样可以让 JavaScript 在等待异步操作完成时暂停函数执行，并在异步操作完成后继续执行函数。

async 函数的主要作用是简化异步操作的编写，使得异步代码更加清晰和易于理解。它可以让开发者以同步的编码风格书写异步代码，避免了回调地狱，提高了代码的可读性和可维护性。

StoreToRefs

使用方式

区分方法与属性

局部组件与全局组件

在 Vue 中，局部组件和全局组件是两种不同的组件注册方式，它们有以下区别：

1. 作用域：
   • 局部组件：局部组件只在其所在的组件中可用，不能在其他组件中直接使用。
   • 全局组件：全局组件在整个 Vue 应用中都可用，可以在任何组件中直接使用。
2. 注册方式：
   • 局部组件：局部组件通过在组件的 components 选项中注册。
   • 全局组件：全局组件通过 Vue.component 方法进行注册。
3. 作用范围：
   • 局部组件：适用于只在当前组件内部使用的组件，通常用于对当前组件进行细分和模块化。
   • 全局组件：适用于在整个应用中多次使用的组件，通常用于共享和重复利用的组件。
4. 命名冲突：
   • 局部组件：局部组件的命名只在当前组件内部有效，不会影响其他组件中同名的组件。
   • 全局组件：全局组件的命名是全局唯一的，如果使用相同名称注册多个全局组件，后注册的组件会覆盖先注册的组件。
5. 加载性能：
   • 局部组件：只有在需要时才会被加载和渲染，可以减少不必要的加载和性能开销。
   • 全局组件：在应用启动时就会被加载和注册，可能会增加初始加载时间和资源占用。

总的来说，局部组件适用于组件内部的功能模块化和封装，而全局组件适用于整个应用中共享和重复利用的组件。选择何种注册方式取决于你的具体需求和组件的使用场景。

在开发者的感受中，使用局部组件需要导入，而使用全局组件不需要进行导入

• 图里代码app写在定义函数前面了

跟着视频走

初始化项目

项目目录

git init
git add .
git commit -m ""

一：创建项目别名路径

**二：**自动按需导入

https://element-plus.gitee.io/zh-CN/guide/quickstart.html

三：配色文件问题

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 导入对应包
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 1. 配置elementPlus采用sass样式配色系统
        ElementPlusResolver({ importStyle: "sass" })
      ],
    }),
    // 按需定制主题配置
    ElementPlus({
      useSource: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 2. 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }
})

四：axios

• axios的作用就是发送请求，这里定义了一个拦截器，用来统一发送请求前后做的各种事

import axios from 'axios'

// 创建axios实例
const httpinstance = axios.create({
    // 设置url拼接
    baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    timeout: 5000
})

// axios请求拦截器
httpinstance.interceptors.request.use(config => {
    // 在发送请求前 做什么 这里逻辑是什么都不做
    return config
    // 请求发送错误 返回一个Promise 这个用来显示请求发送错误的信息
}, e => Promise.reject(e))

// axios响应式拦截器
// 在服务器响应后进行处理
// 处理逻辑是响应成功则把正确的data打印出来，失败则使用promise对象给出错误信息
httpinstance.interceptors.response.use(res => res.data, e => {
    return Promise.reject(e)
})

//组件导出
export default httpinstance

import httpinstance from '@/utils/http'
//导入组件，然后定义一个导出的方法
export function getCategoryAPI() {
    return httpinstance({
        url: 'home/category/head'
    })
}
//这个方法发送一个请求，使用axios的方法

五、页面路由设置

二级路由

// createRouter：创建router实例对象
// createWebHistory：创建history模式的路由

import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // path和component对应关系的位置
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: 'category',
          component: Category
        }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

export default router

六、静态资源

七、自动导入

• 配置这个文件的时候注意，如果加了还不行得重启

主页

使用阿里巴巴图标库

渲染导航

吸顶导航

VueUse

• 使用vueUse获取距离

优化项目

使用elementPlus实现轮播图

组件封装

图片懒加载

// 懒加载指令逻辑
app.directive('img-lazy', {
    mounted(el, binding) {
        // el: 指令绑定的那个元素 img
        // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
        console.log(el, binding.value)
        useIntersectionObserver(
            el,
            ([{ isIntersecting }]) => {
                console.log(isIntersecting)
                if (isIntersecting) {
                    // 进入视口区域
                    el.src = binding.value
                }
            },
        )
    }
})

然后在需要使用的地方就可以通过v-img-lazy

​

优化

组件封装

认识路由

面包屑导航

• 实现思路是点击面包屑的时候页面不是会跳转到相应页面，于是将相应页面的id存在数据库中，在查询后看对得上哪个，对得上就用。url的数字叫路由id

改造轮播图

路由问题

vue路由认识

• 剩下的二级路由，使用函数来进行操作

路由缓存问题解决

• 就是点击小导航不改变页面数据了，而是直接用缓存的数据，以为只加上了数字

定制路由滚动行为

分类

二级路由组件导航

列表切换

一个坑

• 不然会爆找不到属性的错

列表筛选功能

• 使用elementplus实现
• 

        <div class="sub-container">
            <el-tabs v-model="reqData.sortField" @tab-change="tabChange">
                <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
                <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
                <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
            </el-tabs>
百度一下即可

列表无限加载功能

https://element-plus.gitee.io/zh-CN/component/overview.html
想要啥特效就去里面找好了

渲染问题

       <!-- 
                        goods一开始为空 {}categories -> undefined
                        1、使用可选链语法 ?.
                        2、v-if控制渲染时机

                     -->
                    <el-breadcrumb-item :to="{ path: `/category/${goods.categories?.[1].id}` }">{{
                        goods.categories?.[1].name }}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: `/category/sub${goods.categories?.[0]}.id` }">{{ goods.categories?.[0].name }}
                    </el-breadcrumb-item>

页面title

小图切换大图实现

​

SKU组件

表单校验

自定义校验逻辑

防止用户一上来就点击登录

登录功能

接口设计

参数解构赋值

拦截器统一项目错误信息

使用Pinia进行管理用户数据

js中的函数调用方式

项目账号密码

account password
cdshi0080 123456
cdshi0081 123456
cdshi0082 123456
cdshi0083 123456
cdshi0084 123456
cdshi0085 123456
cdshi0086 123456
cdshi0087 123456
cdshi0088 123456

pinia数据持久化

npm install pinia-plugin-persistedstate

请求拦截器

谷歌调试Pinia

Pinia数据持久化大问题

多模板适配

请求头携带token

退出登录

Token失效401拦截处理

本地购物车操作

购物车图标

删除购物车

购物车价格计算

购物车基础

购物车单选框按钮

全选框

购物车统计数量

购物车价格计算

• 没有什么好说的
• 多掌握数组函数

接口购物车

加入购物车

• 判断token存不存在

清除购物车中内容

合并购物车

• 合并购物车操作

结算页面

地址切换

• 这里查看浏览器vue插件时会出现一点问题

• 面板数据不显示 这不是个人代码写的问题，而是项目后端接口被请求太多次

支付

支付面板渲染

• 这样写就能够完成支付宝跳转功能

const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const backURL = 'http://127.0.0.1:5173/paycallback'
const redirectUrl = encodeURIComponent(backURL)
const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`

支付宝沙箱账号

账号	jfjbwb4477@sandbox.com
登录密码	111111
支付密码	111111

支付结果

倒计时功能实现

• 注意编写定时器的时候要在定时器结束时销毁定时器

个人中心

路由配置

订单基础列表渲染

Tab切换

分页逻辑实现

vue2 学习

1. Vue 实例及组件：学习 Vue.js 的基础概念，包括如何创建 Vue 实例、组件的定义和使用、组件之间的通信等。
2. 模板语法：掌握 Vue.js 的模板语法，包括插值、指令、事件绑定、计算属性等，这些都是用于构建动态视图的基础。
3. 计算属性和监听器：了解计算属性和监听器的用法，以及它们在 Vue 实例中的应用场景。
4. 条件渲染和列表渲染：学习如何使用 v-if、v-else、v-show 等指令进行条件渲染，以及如何使用 v-for 指令进行列表渲染。
5. 表单处理：了解 Vue.js 中表单处理的方法，包括双向绑定、表单输入绑定、表单验证等。
6. 组件通信：学习组件之间的通信方式，包括 props 和事件、$emit 和 $on、$refs 等。
7. 路由管理：学习使用 Vue Router 进行路由管理，实现单页应用的路由导航。
8. 状态管理：学习使用 Vuex 进行状态管理，管理应用程序的共享状态，实现数据的集中管理。
9. 生命周期钩子：了解 Vue.js 的生命周期钩子函数，掌握它们的执行顺序和用法。
10. Vue.js 的核心概念：包括响应式数据、虚拟 DOM、组件生命周期等核心概念，深入理解这些概念有助于更好地使用 Vue.js 开发应用程序。

vue3学习

学习 Vue.js 3.x 版本时，你需要掌握以下内容：

1. Composition API：Vue 3 引入了 Composition API，它是一种全新的组织组件代码的方式，使得组件逻辑更加清晰、灵活。学习如何使用 Composition API 来组织组件代码是学习 Vue 3 的重要内容。
2. 响应式数据：了解 Vue 3 中的响应式数据系统，包括如何使用 reactive、ref、computed 等 API 来创建响应式数据，并且理解其原理。
3. 模板语法：掌握 Vue 3 的模板语法，与 Vue 2.x 类似，但也有一些改动和新增，比如 v-model 的用法变化、事件修饰符的更新等。
4. Teleport：学习使用 Teleport 特性来实现 Portal，可以将组件的 DOM 结构渲染到任意 DOM 节点上，而不仅仅是当前组件的父节点。
5. Suspense：学习使用 Suspense 组件来优雅地处理异步组件加载过程中的状态，提升用户体验。
6. 组件 API：学习 Vue 3 中组件的各种 API，包括 setup 函数、生命周期钩子、provide/inject、props 等。
7. 响应式 API：除了 Composition API 外，还要了解 Vue 3 中的其他响应式 API，比如 watch、watchEffect 等。
8. Vue Router：了解 Vue 3 中的路由管理，Vue Router 4 支持 Vue 3，并且有一些新特性和改进。
9. Vuex：了解 Vue 3 中的状态管理，Vuex 4 也已经支持 Vue 3，并且有一些新的特性和改进。
10. Vue.js 的核心概念：包括虚拟 DOM、组件生命周期、数据绑定、事件处理等核心概念，Vue 3 中这些概念依然存在并且有所改进。

计算属性和监听器：了解计算属性和监听器的用法，以及它们在 Vue 实例中的应用场景。
4. 条件渲染和列表渲染：学习如何使用 v-if、v-else、v-show 等指令进行条件渲染，以及如何使用 v-for 指令进行列表渲染。
5. 表单处理：了解 Vue.js 中表单处理的方法，包括双向绑定、表单输入绑定、表单验证等。
6. 组件通信：学习组件之间的通信方式，包括 props 和事件、$emit 和 $on、$refs 等。
7. 路由管理：学习使用 Vue Router 进行路由管理，实现单页应用的路由导航。
8. 状态管理：学习使用 Vuex 进行状态管理，管理应用程序的共享状态，实现数据的集中管理。
9. 生命周期钩子：了解 Vue.js 的生命周期钩子函数，掌握它们的执行顺序和用法。
10. Vue.js 的核心概念：包括响应式数据、虚拟 DOM、组件生命周期等核心概念，深入理解这些概念有助于更好地使用 Vue.js 开发应用程序。

vue3学习

学习 Vue.js 3.x 版本时，你需要掌握以下内容：

1. Composition API：Vue 3 引入了 Composition API，它是一种全新的组织组件代码的方式，使得组件逻辑更加清晰、灵活。学习如何使用 Composition API 来组织组件代码是学习 Vue 3 的重要内容。
2. 响应式数据：了解 Vue 3 中的响应式数据系统，包括如何使用 reactive、ref、computed 等 API 来创建响应式数据，并且理解其原理。
3. 模板语法：掌握 Vue 3 的模板语法，与 Vue 2.x 类似，但也有一些改动和新增，比如 v-model 的用法变化、事件修饰符的更新等。
4. Teleport：学习使用 Teleport 特性来实现 Portal，可以将组件的 DOM 结构渲染到任意 DOM 节点上，而不仅仅是当前组件的父节点。
5. Suspense：学习使用 Suspense 组件来优雅地处理异步组件加载过程中的状态，提升用户体验。
6. 组件 API：学习 Vue 3 中组件的各种 API，包括 setup 函数、生命周期钩子、provide/inject、props 等。
7. 响应式 API：除了 Composition API 外，还要了解 Vue 3 中的其他响应式 API，比如 watch、watchEffect 等。
8. Vue Router：了解 Vue 3 中的路由管理，Vue Router 4 支持 Vue 3，并且有一些新特性和改进。
9. Vuex：了解 Vue 3 中的状态管理，Vuex 4 也已经支持 Vue 3，并且有一些新的特性和改进。
10. Vue.js 的核心概念：包括虚拟 DOM、组件生命周期、数据绑定、事件处理等核心概念，Vue 3 中这些概念依然存在并且有所改进。