# FreshRabbit

**Repository Path**: yemoleng/fresh-rabbit

## Basic Information

- **Project Name**: FreshRabbit
- **Description**: vue实践项目小兔鲜git仓库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-11
- **Last Updated**: 2023-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FreshRabbit

### 项目描述 

基于 vue3.0 的组合 AP I方式与选项 API 的方式开发的一个综合品类的电商前台系统。 实现了一套完整的电商业务流程，从首页，类目，搜索，品牌，商品详情，购物车，结算，支付，个人中心，订单管理，收货地址管理，评价中心，和其他个人信息管理业务。

## 使用技术

项目基于vue技术来实现，大概会使用以下技术：

- Vue3.0 (使用组合api的方式来开发)
- Vite (项目脚手架)
- axios (请求接口)
- vue-router (单页路由)
- pinia (状态管理)
- ElementPlus（UI组件库）
- @vueuse/core (组合api常用工具库)



# 编写过程及问题

## 一、基础配置

- 项目初始化和git管理

- 别名路径联想设置

- elementUIPlus按需引入

- elementUIPlus主题色引入

- axios基本配置

`import Layout from '@/views/Layout/index.vue'`，提前定义但未使用，报错找不到资源`GET http://127.0.0.1:5173/src/views/Layout/Login.vue net:ERR ABORTED 404 (Not Found)`

- 项目整体路由设计

添加子路由时忘记在父组件添加二级路由出口，可以是`<RouterView/>`也可以是`<router-view/>`

- 添加全局样式文件和配置全局自动导入`scss`文件



## 二、Layout页面

### 1、vue3的setup

Vue3 保留了 Vue2 中引用组件的方式，使用组件实例的 `components` 属性声明，但是，使用 Vue3 提供的 `script setup` 语法，我们只需要将其引入，便可以使用。

### 2、LayoutNav

**样式错乱**：`main.js`里面引入了`main.css`样式文件

**css里的&表示的意思：** **&** 表示在嵌套层次中回溯一层。[[参考文章]](https://blog.csdn.net/qq_44192588/article/details/106111301)

```css
.box{
    &:before{
        border-color: red;
    }
    &:after{
        border-color: green;
    }
}
```

`&:before`相当于`.box:before`
`&:after`相当于`.box:after`
`:before`和`:after`是CSS中的伪元素，在这里分别表示为在使用box类的元素前面和后面插入指定内容

### 3、LayoutHeader

**RouterLink渲染问题**

`router-link`在页面默认渲染出来的是`<a></a>`标签，如果想要修改成其他标签，比如`div`标签，只需要在`router-link`中添加`tag="div"`即可，并且不会影响其路由的切换。

***text-indent: -9999px;***：为什么要移出屏幕外而不直接删除文字？

### 4、吸顶导航栏

用原始方法写吸顶效果



## 三、Home页面视图

图片懒加载原始方法



## 四、一级分类

> **路由缓存问题**

使用带有参数的路由时需要注意的是，当用户从`/users/johnny`导航到`/users/jolyne`时，相同的组件实例将被重复使用，只有路劲不同。因为两个路由都染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

问题：一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新

解决问题的思路：

- 1.让组件实例不复用，强制销毁重建；

在路由入口添加key，这样浏览器会将其视为不同的路由而进行销毁重建

- 2.监听路由变化，变化之后执行数据更新操作

`beforeRouteUpdate`钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可，或者，使用`beforeRouteUpdate`导航守卫，它也可以取消导航：

> **封装业务逻辑代码为hook**

1.按照业务声明以`use`打头的逻辑函数
2.把独立的业务逻辑封装到各个函数内部
3.函数内部把组件中需要用到的数据或者方法return出去
4.在组件中调用函数把数据或者方法组合回来使用

## 五、详情页

**渲染详情页基础数据报错undefind**

错误原因：goods一开始{} `{}.categories` -> `undefined` -> `undefined[1]`
1、可选链的语法`.?`
2、`v-if`手动控制渲染时机保证只有数据存在才渲染



**SKU组件**(回去理解)

问：在实际工作中，经常会遇到别人写好的组件，熟悉一个三方组件，首先重点看什么？
答：`props`和`emit`,`props`决定了当前组件接收什么数据，`emit`决定了会产出什么数据



## 六、登录页

> `TypeError:Cannot read properties of undefined (reading replace)`

router不能写在方法里面

> 账号密码错误仍然跳转首页

忘记写await

> 在js文件中跳转路由

v3中`useRouter` 不可以在非`setup`中使用`useRouter`，需要直接从路由文件中导入

```js
import router from '@/router'
```

 

## 七、购物车

> 重写头部购物车



## 八、订单页

> **可选链运算符**（**`?.`**）

`checkInfo.summary?.totalPayPrice.toFixed(2)`

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。`?.` 运算符的功能类似于 `.` 链式运算符，不同之处在于，在引用为空 ([nullish](https://developer.mozilla.org/zh-CN/docs/Glossary/Nullish) ) ([`null`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 或者 [`undefined`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined)) 的情况下不会引起错误，该表达式短路返回值是 `undefined`。与函数调用一起使用时，如果给定的函数不存在，则返回 `undefined`。

问题：问什么在控制台输出是`undefined`，但是数据却是实际存在的。

⭕特别注意如果某个属性有值但是输出却是`undefined`，可能是因为获取值的方法是异步的，赋值的时候并没有获取到相关的值。

> 使用可选链后报`[vue/no-parsing-error]Parsing error:Unexpected token错误`
在`.eslintrc.cjs`添加`'parser': '@typescript-eslint/parser'`，记得需要安装依赖`npm install @typescript-eslint/parser --save-dev`。