# eribbit-client-pc

**Repository Path**: llvyr/eribbit-client-pc

## Basic Information

- **Project Name**: eribbit-client-pc
- **Description**: 电商平台小兔鲜项目 地址:http://www.llvyr.top:8003 账号:llvyr123 密码：123456
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: http://www.llvyr.top:8003
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-23
- **Last Updated**: 2022-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 # eribbit-shop-client-pc

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### 提示 
登录账号:llvyr123
密码：123456

沙箱支付账号：nwnppd2252@sandbox.com
沙箱支付，密码：111111

### 项目小计
+ .prettierrc 项目格式化 行末尾单引号问题
+ 'space-before-function-paren': 0,  格式化函数小括号空格问题
+ 'vue/multi-word-component-names': false 组件设置名称问题
+ less 的混入语法
+ less 的自动导入变量   style-resources-loader
+ ~ 波浪选择器 除了自己之外的兄弟选择器
+ 显示用户信息需要借助 computed 做到实时更新
+ 导航栏 空白页处理方式 使用假数据代替，请求到真实数据后替换
+ 导航栏吸顶效果 细节处理  
+ 展示后台请求的数据时先判空 在渲染
+ async setup  需要借助 Suspense  来渲染组件 vue3 的特性
+ vue 自定义插件  返回一个含有 install 方法的 对象
+ 定时器问题 重复添加 销毁组件的同时要销毁定时器
+ 骨架屏封装 定位
+ 数据懒加载技术 useIntersectionObserver()
+ 高阶函数使用技巧:
  - 1. const { result: brands, target } = useLazyData(() => Home.brandList(10)) 
  - 2 .@change="($event) => checkOne(goods.skuId, $event)"
+ 自定义指令 图片懒加载（当图片进入到可视区域的是否 设置img src的属性为保留的值）
+ 封装 面包屑组件 h 、 render函数 、插槽的使用
+ 避免模板使用过多的 if 判断数据是否存在 可以 在 创建时返回一个空的对象
+ 动态路由组件初始化 （路由规则发生改变）/category/:id  利用 watch/watchEffect 监听
+ 动画执行的时机 组件的创建和移除 
+ 跳转后 滚动条滚动到顶部 vue-router scrollBehavior
+ import { useVModel } from '@vueuse/core'  使用 vueUse 完成 复选框的封装
+ useMouseInElement 放大镜组件
+ onClickOutside 城市联动组件 
+ sku 解决方案 重点
+ 计数器组件封装
+ :deep(.xtx-carousel)  vue3样式穿透 
+  axios 遇见 http https 开头的地址，不会加上基准地址
+ 分页组件封装 (分页逻辑)
+ 封装消息提示组件 createNode render
+ useIntervalFn 定时器封装 
+ vee-validate 表单验证
+ 购物车实现以及逻辑封装
+ 本地和服务器购物车合并
+ 弹出框封装
+ 倒计时服务器与本地 时间不一致问题
+ 支付金额一律是走后端计算
+ 菜单激活的坑 形成嵌套关系 
+ 确认收货 http://pcapi-xiaotuxian-front-devtest.itheima.net//member/order/consignment/1558409065472724993



### 小 bug
+ const list = computed(() => {store.state.category.list}) 错误写法 return 忘记写
+ const list = computed(() => store.state.category.list)   正确写法 

+  <Transition name="fade-right" mode="out-in" appear :key="topCategory.id"/>   key 添加的位置 

+  try catch 无法捕获异步代码错误    Promise.reject 是一个异步方法

+  getters.selectedList.length === getters.validList.length   购物车全选功能 
+ getters.selectedList.length === getters.validList.length && getters.validList.length !== 0 


+const emit = defineEmits("change") 错误写法
const emit = defineEmits(["change"]) 正确写法


### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).