# vue3实战

**Repository Path**: pleaseanswer/vue3-actual-combat

## Basic Information

- **Project Name**: vue3实战
- **Description**: vue3+js 京东到家
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2022-03-17
- **Last Updated**: 2024-10-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 项目实战, vue3, vue3-京东

## README

# 一 “京东到家”项目首页开发

> 效果图

<img src="./images/首页.png" />

## 1 工程初始化

* `vue create jingdong`
* 自定义安装项 `router + vuex + css pre-processors + linter`
  * `3.x`
  * `scss`
  * `standard esLint`

## 2 工程目录代码简介及整理

* 安装插件
  * ESLint
  * Vetur

## 3 基础样式集成及开发模拟器的使用

* 安装 `normalize.css`
  * `npm i normalize -S`

> 使元素的渲染在多个浏览器下都能保持一致并且符合规范

## 4 flex + iconfont 完成首页 docker 样式编写

<img src="./images/jd-home-docker.png" />

> 从下载的文件夹中 copy 

* iconfont.css

```css
@font-face {
  font-family: 'iconfont';  /* Project id 2408176 */
  /* src: ... 项目中 copy */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: .16rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

## 5 使用 Scss 组织地址区域布局

<img src="./images/jd-home-position.png" />

### 5.1 统一管理css变量

<img src="./images/css__viriables.png">

* viriables.scss

```scss
  $content-fontcolor: #333;
```

### 5.2 css_mixin 的使用

<img src="./images/css__mixin.png">

* mixins.scss

```scss
@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```

## 6 利用 CSS 技巧实现搜索及 banner 区域布局

<img src="./images/jd-home-search+banner.png" />

### 6.1 图片抖动

* 使用 `padding-bottom hack` 避免图片后面的内容抖动

```scss
.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%; // 宽 / 高
  &__img {
    width: 100%;
  }
}
```

## 7 使用 flex 布局实现图标列表布局

<img src="./images/jd-home-flex.png" />

## 8 首页布局收尾

<img src="./images/jd-home-list.png" />

## 9 首页组件的合理拆分

* App.vue

```vue
<template>
  <Home />
</template>
```

* home > Home.vue

```vue
<template>
  <div class="wrapper">
    <StaticPart />
    <Nearby />
  </div>
  <Docker />
</template>
```

## 10 使用 v-for, v-html 指令精简页面代码

* `d-html`

```html
<div class="iconfont" v-html="item.icon"></div>
```

## 11  CSS 作用域约束以及 Vue 开发者工具的安装使用

* `scoped`

### 11.1 扩展程序 vue devtools

<img src="./images/devtools+name.png" />



# 二 登录功能开发

## 1 登陆页面布局开发

> 效果图

<img src="./images/登录页.png" />

## 2 路由守卫实现基础登陆校验功能

* 实现登录跳转 

> login.vue

```js
import { useRouter } from 'vue-router';
export default {
  name: 'Login',
  setup() {
    const router = useRouter();
    const handleLogin = () => {
      localStorage.isLogin = true;
      router.push({ name: 'Home' });
    }
    return { handleLogin }
  }
}
```

* 使用全局路由守卫限制未登录时访问其他页面会跳转到 login 页面

> router > index.js

```js
router.beforeEach((to, from, next) => {
  const { isLogin } = localStorage;
  (isLogin || to.name === 'Login') ? next() : next({ name: 'Login' })
})
```

* 使用路由独享守卫限制登陆后不能访问 login 页面

```js
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    beforeEnter(to, from, next) {
      const { isLogin } = localStorage;
      isLogin ? next({ name: 'Home' }) : next()
    }
  }
]
```

## 3 注册页面开发及路由串联复习

<img src="./images/注册页.png" />

## 4 使用 axios 发送登陆 Mock 请求

> Login.vue

```js
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/json'

export default {
  name: 'Login',
  setup() {
    const data = reactive({
      username: '',
      password: ''
    })
    const router = useRouter();
    const handleLogin = () => {
      // https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd
      axios.post('.../api/user/login', {
        username: data.username,
        password: data.password
      }).then(() => {
        localStorage.isLogin = true;
        router.push({ name: 'Home' });
      }).catch(() => {
        alert('失败')
      })
    }
    return { data, handleLogin, handleRegisterClick }
  }
}
```

## 5 请求函数的封装

> utils > request.js

```js
import axios from 'axios';
export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    axios.post(url, data, {
      baseURL: '...',
      headers: {
        'Content-Type': 'application/json'
      }
    }).then((res) => {
      resolve(res.data)
    }, err => {
      reject(err)
    })
  })
}
```

> login.vue

```js
const handleLogin = async () => {
  try {
    const result = await post('/api/user/login', {
      username: data.username,
      password: data.password
    })
    if(result?.errno === 0) {
      localStorage.isLogin = true;
      router.push({ name: 'Home' });
    } else {
      alert('登录失败')
    }
  } catch(e) {
    alert('请求失败')
  }
}
```

## 6 Toast 弹窗组件的开发

> components > Toast.vue

```vue
<template>
<div class="toast">{{message}}</div>
  
</template>
<script>
export default {
  props: ['message']
  
}
</script>
<style lang="scss" scoped>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: .1rem;
  border-radius: .05rem;
  background: rgba(0,0,0,.35);
  color: #fff;
}
</style>
```

> Login.vue

```js
const showToast = (message) => {
  data.showToast = true;
  data.toastMessage = message;
  setTimeout(() => {
    data.showToast = false;
    data.toastMessage = '';
  }, 2000);
}
const handleLogin = async () => {
  try {
    const result = await post('111/api/user/login', {
      username: data.username,
      password: data.password
    })
    if(result?.errno === 0) {
      localStorage.isLogin = true;
      router.push({ name: 'Home' });
    } else {
      showToast('登录失败')
    }
  } catch(e) {
    showToast('请求失败')
  }
}
```

## 7 通过代码拆分增加逻辑可维护性

### 7.1 拆分 login 页面 toast 的相关代码

<img src="./images/login-toast.png" />

### 7.2 将 toast 相关代码放到 Toast 组件单独管理

> Login.vue

```js
import Toast, { useToastEffect } from '../../components/Toast.vue';
```

> components > Toast.vue

<img src="./images/toast单独管理.png" />

## 8 Setup 函数的职责以及注册功能的实现

### 8.1 职责 -- 代码执行的流程

* 将不同的逻辑分别放到各自的函数中，setup 函数仅用来做代码流程的控制

```js
const userLoginEffect = (showToast) => {
  const router = useRouter();
  const data = reactive({ username: '', password: '' })
  const handleLogin = async () => {
    try {
      const result = await post('111/api/user/login', {
        username: data.username,
        password: data.password
      })
      if(result?.errno === 0) {
        localStorage.isLogin = true;
        router.push({ name: 'Home' });
      } else {
        showToast('登录失败')
      }
    } catch(e) {
      showToast('请求失败')
    }
  }
  const { username, password } = toRefs(data)
  return { 
    username, password,
    handleLogin 
  }
}

const userRegisterEffect = () => {
  const router = useRouter();
  const handleRegisterClick = () => {
    router.push({ name: 'Register' });
  }
  return { handleRegisterClick }
}

export default {
  name: 'Login',
  components: { Toast },
  setup() {
    const { show, toastMessage, showToast } = useToastEffect();
    const { username, password, handleLogin } = userLoginEffect(showToast);
    const { handleRegisterClick } = userRegisterEffect();

    return {
      username, password,
      show, toastMessage,
      handleLogin,
      handleRegisterClick 
    }
  }
}
```

# 三 商家展示功能开发（上）

> 效果图

<img src="./images/商品展示1.png" /><img src="./images/商品展示2.png" />

## 1 首页附近店铺数据动态化-详情页准备

### 1.1 封装 get 请求

1. 创建 axios 实例

```js
const instance = axios.create({
  baseURL: 'https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd',
  timeout: 10000
})
```

2. 封装 get 请求

```js
export const get = (url, params = {}) => {
  return new Promise((resolve, reject) => {
    instance.get(url, { params }, {
    }).then((res) => {
      resolve(res.data)
    }, err => {
      reject(err)
    })
  })
}
```

### 1.2 获取列表数据

1. 使用 `get` 方法获取列表数据

```js
const getNearbyList = async () => {
 const result = await get('/api/shop/host-list');
 if(result?.errno === 0 && result?.data?.length) {
   nearbyList.value = result.data, result.data;
 }
}
```

2. 代码拆分

<img src="./images/首页nearbyList.png" />

## 2 动态路由，异步路由与组件拆分复用

### 2.1 异步路由

```js
const routes = [
{
 path: '/',
 name: 'Home',
 component: () => import(/* webpackChunkName: "home" */ '../views/home/Home')
}]
```

### 2.2 组件拆分复用

* 将商品列表的代码拆分到单独的组件
* 可在首页、商品列表页使用

### 2.3 动态类名

```html
<div :class="{'shop__content': true, 'shop__content--bordered': !hideBorder}"></div>
```

## 3 搜索布局及路由跳转

### 3.1 搜索布局

<img src="./images/jd-shop-search.png" />

### 3.2 路由跳转

1. 返回上一页

```js
import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter();
    const handleBackClick = () => {
      router.back()
    }
    return { handleBackClick }
  }
}
```

2. 点击跳转进入商家详情

```html
<router-link to="/shop" v-for="item in nearbyList" :key="item._id">
  <ShopInfo :item="item" />
</router-link>
```

## 4 路由参数的传递以及商家详情的获取

### 4.1 路由传参

1. 设置 `router`

```js
const routes = [{
  path: '/shop/:id',
  name: 'Shop',
  component: () => import(/* webpackChunkName: "shop" */ '../views/shop/Shop')
}]
```

2. 路由跳转时传递 `id`

```html
<router-link
  v-for="item in nearbyList"
  :key="item._id"
  :to="`/shop/${item._id}`"
>
  <ShopInfo :item="item" />
</router-link>
```

### 4.2 商家详情的获取

* 获取路由 `id` 从而请求获取相关数据

```js
import { reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { get } from '../../utils/request'
const useShopInfoEffect = () => {
  const route = useRoute();
  const data = reactive({ item: {} })
  const getItemData = async () => {
    const result = await get(`/api/shop/${route.params.id}`)
    if(result?.errno === 0 && result?.data) {
      data.item = result.data
    }
  }
  const { item } = toRefs(data)
  return { item, getItemData }
}
```

## 5 商家页面核心样式开发

<img src="./images/jd-shop-content.png" />

## 6 样式的优化与代码复用

<img src="./images/jd-shop-content2.png" />

## 7 商家详情页分类及内容联动的实现

1. 页面 `tab` 点击

```html
<div class="category">
  <div
    :class="{'category__item': true, 'category__item--actived': currentTab === item.tab}"
    v-for="item in categories"
    :key="item.name"
    @click="()=>handleCategoryClick(item.tab)"
  >{{item.name}}</div>
</div>
```

2. `js` 处理

<img src="./images/jd-shop-content3.png" />

## 8 使用 watchEffect 巧妙的进行代码拆分

### 8.1 初始化时获取列表 + tab变化时获取列表

```js
watchEffect(() => { getContentData() })
```

### 8.2 各司其职

1. 和 `tab` 切换相关的逻辑

```js
const useTabEffect = () => {
  const currentTab = ref(categories[0].tab)
  const handleTabClick = (tab) => {
    currentTab.value = tab
  }
  return { currentTab, handleTabClick }
}
```

2. 列表相关逻辑

```js
const useCurrentList = (currentTab) => {
  const route = useRoute()
  const shopId = route.params.id
  const content = reactive({ list: [] })

  const getContentData = async () => {
    const result = await get(`/api/shop/${shopId}/products`, { tab: currentTab.value })
    if(result?.errno === 0 && result?.data?.length) {
      content.list = result.data
    }
  }
  watchEffect(() => { getContentData() })
  const { list } = toRefs(content)
  return { list }
}
```

3. 代码流程

```js
setup() {
  const { currentTab, handleTabClick } = useTabEffect()
  const { list } = useCurrentList(currentTab)

  return { categories, currentTab, handleTabClick, list }
}
```

# 四 商家展示功能开发（下 ）

> 效果图

<img src="./images/商品展示3.png" />

## 1 购物车的样式开发

<img src="./images/jd-shop-cart.png" />

## 2 Vuex中购物车数据结构的设计

### 2.1 store 存放购物车数据

```js
export default createStore({
  state: {
    cartList: {
      // 商铺id: {
      //   商品id: {
      //     // 商品内容及购物数量
      //   }
      // }
    }
  },
  mutations: {
    // count +/- 1
    changeCartItemInfo(state, payload) {
      const { shopId, productId, productInfo, num } = payload
      let shopInfo = state.cartList[shopId] || {};
      let product = shopInfo[productId];
      
      // store不存在该商品数据时，初始化product
      if(!product) {
        product = productInfo;
        product.count = 0;
      }

      product.count = product.count + num;
      shopInfo[productId] = product;
      state.cartList[shopId] = shopInfo;
    }
  },
}
```

### 2.2 列表操作

```js
// 购物车相关逻辑
const useCartEffect = () => {
  const store = useStore();
  const { cartList } = toRefs(store.state)
  const changeCartItemInfo = (shopId, productId, productInfo, num) => {
    store.commit('changeCartItemInfo', {
      shopId, productId, productInfo, num
    })
  }
  return { cartList, changeCartItemInfo }
}
```

## 3 使用 computed 完成订单价格计算

### 3.1 计算选中商品总数

```js
const total = computed(() => {
  const productList = cartList[shopId];
  let count = 0
  if(productList) {
    for (let i in productList) {
      const product = productList[i]
      count += product.count
    }
  }
  return count
})
```

### 3.2 计算选中商品总价

```js
const price = computed(() => {
  const productList = cartList[shopId];
  let count = 0
  if(productList) {
    for (let i in productList) {
      const product = productList[i]
      count += (product.count * product.price)
    }
  }
  return count.toFixed(2)
})
```

## 4 购物车及列表双向数据同步功能开发

### 抽离购物车相关逻辑

> `Content.vue` 与 `Cart.vue` 公用

```js
export const useCommonCartEffect = () => {
  const store = useStore();
  const { cartList } = toRefs(store.state)
  const changeCartItemInfo = (shopId, productId, productInfo, num) => {
    store.commit('changeCartItemInfo', {
      shopId, productId, productInfo, num
    })
  }
  return { cartList, changeCartItemInfo }
}
```

## 5 根据购物车选中状态计算订单金额

### 5.1 列表展示

```html
<template v-for="item in productList" :key="item._id">
  <div class="product__item" v-if="item.count > 0">...
```

### 5.2 获取列表数据

```js
const productList = computed(() => {
  const productList = cartList[shopId] || [];
  return productList
})
```

### 5.3 设置 是否选中 状态

```html
<div
  class="product__item__checked iconfont"
  v-html="item.check ? '&#xe69b;' : '&#xe6f7;'"
  @click="() => changeCartItemChecked(shopId, item._id)"
>
```

```js
const changeCartItemChecked = (shopId, productId) => {
  store.commit('changeCartItemChecked', { shopId, productId })
}
changeCartItemChecked(state, payload) {
  const { shopId, productId } = payload;
  const product = state.cartList[shopId][productId];
  product.check = !product.check;
},
```

## 6 全选及清空购物车的功能实现

### 6.1 清空购物车

```js
const cleanCartProducts = (shopId) => {
  store.commit('cleanCartProducts', { shopId })
}
cleanCartProducts(state, payload) {
  const { shopId } = payload;
  state.cartList[shopId] = {};
},
```

### 6.2 全选

```html
<div
  class="product__header__all"
  @click="() => setCartItemsChecked(shopId)"
>
  <span
    class="product__header__icon iconfont"
    v-html="allChecked ? '&#xe69b;' : '&#xe6f7;'"
  >
  </span>
  全选
</div>
```

1. 设置 是否全选中 状态

```js
const allChecked = computed(() => {
  const productList = cartList[shopId];
  let result = true
  if(productList) {
    for (let i in productList) {
      const product = productList[i]
      if(product.count > 0 && !product.check) {
        result = false
      }
    }
  }
  return result
})
```

2. 状态改变

```js
const setCartItemsChecked = (shopId) => {
 store.commit('setCartItemsChecked', { shopId })
}
setCartItemsChecked(state, payload) {
  const { shopId } = payload;
  const products = state.cartList[shopId];
  if(products) {
    for(let key in products) {
      const product = products[key];
      product.check = true;
    }
  }
}
```

## 7 商家详情页面代码优化

1. 获取购物车信息逻辑

```js
const useCartEffect = () => {
  const total = computed(() => {})
  const price = computed(() => {})
  const productList = computed(() => {})
  const allChecked = computed(() => {})
  const changeCartItemChecked = () => {}
  const cleanCartProducts = () => {}
  const setCartItemsChecked = () => {}
}
```

2. 展示隐藏购物车逻辑

```js
const toggleCartEffect = () => {
  const showCart = ref(false);
  const handleCartShowChange = () => {}
}
```

## 8 购物车数据结构的变更

### 8.1 store 存放购物车数据

```js
export default createStore({
  state: {
    cartList: {
      // 商铺id: {
      //   shopName: '沃尔玛',
      //   productList: {
      //     productId 商品id: {
      //     // 商品内容及购物数量
      //   }
      // }
    }
  },
```

### 8.2 修改相关逻辑

1. 获取商品列表

```js
const productList = cartList[shopId]?.productList;
```

2. 页面展示购物车商品列表

```js
{{ cartList?.[shopId]?.productList?.[item._id]?.count || 0 }}
```

3. 写入 `store` 时的初始化

```js
let shopInfo = state.cartList[shopId] || {
  shopName: '',
  productList: {}
};
```

### 8.3 获取店铺名称

1. 进入店铺详情 -- 获取列表数据时传递

2. 加入购物车时触发

```js
changeShopName(shopId, shopName);
```

## 9 通过 LocalStorage 实现购物车信息持久存储

```js
const setLocalCartList = (state) => {
  const { cartList } = state
  const cartListString = JSON.stringify(cartList)
  localStorage.cartList = cartListString
}

const getLocalCartList = () => {
  return JSON.parse(localStorage.cartList) || {}
}

export default createStore({
  state: {
    cartList: getLocalCartList()
  }
})
```

# 五 核心购物链路开发

> 效果图

<img src="./images/确认订单.png" />

## 1 确认订单页面创建及顶部布局

### 1.1 页面创建

1. 跳转

```html
<router-link :to="{ path: `/orderConfirmation/${shopId}` }">
  去结算
</router-link>
```

2. 路由

```js
{
  path: '/orderConfirmation/:id',
  name: 'OrderConfirmation',
  component: () => import('../views/orderConfirmation/OrderConfirmation')
},
```

### 1.2 顶部布局

* 渐变

```css
.top {
  position: relative;
  background-size: 100% 1.59rem;
  background-image: linear-gradient(0, rgba(0, 145, 225, 0) 4%, #0091ff 50%);
  background-repeat: no-repeat;
}
```

## 2 订单商品列表数据获取与布局

<img src="./images/jd-shop-cart-list.png" />

## 3 页面布局及展示逻辑开发

```html
<div class="wrapper">
  <div class="top"></div>
  <div class="products">
    <div class="products__title"></div>
    <div class="products__wrapper"></div>
  </div>
  <div class="order"></div>
</div>
```

```scss
.wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #eee;
}
.top {
  position: relative;
  height: 1.96rem;
  background-size: 100% 1.59rem;
  background-image: linear-gradient(0, rgba(0, 145, 225, 0) 4%, #0091ff 50%);
  background-repeat: no-repeat;
}
.products {
  margin: .16rem .18rem .1rem .18rem;
  &__wrapper {
    overflow-y: scroll;
    margin: 0 .18rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: .6rem;
    top: 2.5rem;
  }
}
.order {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: .49rem;
  line-height: .49rem;
  background: #fff;
}
```

## 4 确认订单页面组件拆分及弹框布局制作

### 4.1 组件拆分

```html
<div class="wrapper">
  <TopArea />
  <ProductList />
  <Order />
</div>
```

#### 1. `TopArea`

* `handleClick()`

#### 2. `ProductList`

* `const { productList, shopName } = useCommonCartEffect(shopId)`

#### 3. `Order`

* `const { caculations } = useCommonCartEffect(shopId)`

### 4.2 弹框布局制作

* mask + 弹框（取消订单 创建订单）

## 5 购物流程开发完成

* 创建订单/取消订单 -> 清空购物车 + 跳转回首页

## 6 下单流程开发优化

* “去结算” 按钮展示与否
* `productList` 过滤掉 `count==0` 的数据
* 点击 “确认订单” 跳转至 订单页面

## 7 订单列表页布局开发

## 8 订单列表逻辑开发

# 六 真机调试及工程发布流程

## 1 如何进行真机调试

* 局域网同 `ip`

## 2 解决真机调试过程中的展示问题

## 3 实现项目对不同设备的展示适配

* 修改 `public > index.html`

```js
var width = document.documentElement.clientWidth || document.body.clientWidth;
var ratio = width / 375;
var fontSize = 100 * ratio;
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
```

## 4 项目上线和课程总结