基于vue3.0.1beta搭建仿京东的电商H5项目

下面我来为您详细讲解“基于vue3.0.1beta搭建仿京东的电商H5项目”的完整攻略。

准备工作

首先，需要安装 Node.js 和 NPM，可以到官网下载并安装。

然后，安装 Vue CLI 3，可以使用如下命令：

npm install -g @vue/cli

创建项目

接下来，我们可以使用 Vue CLI 3 创建一个基于 Vue 3.0 的项目。可以使用如下命令：

vue create jd-h5

在创建项目的过程中，可以选择自己需要的选项，例如添加 TypeScript 或者安装 Vuex 等。

配置路由

接着，需要配置路由。可以使用 Vue Router，安装命令如下：

npm install vue-router

然后，在 src 目录下创建 router.js 文件，配置路由信息，具体代码示例如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home')
  },
  {
    path: '/category',
    name: 'Category',
    component: () => import(/* webpackChunkName: "category" */ '@/views/Category')
  },
  {
    path: '/cart',
    name: 'Cart',
    component: () => import(/* webpackChunkName: "cart" */ '@/views/Cart')
  },
  {
    path: '/mine',
    name: 'Mine',
    component: () => import(/* webpackChunkName: "mine" */ '@/views/Mine')
  }
]

const router = new VueRouter({
  routes
})

export default router

编写页面

接下来，开始编写页面。在 src 目录下创建 views 目录，并创建四个页面文件：Home.vue、Category.vue、Cart.vue、Mine.vue。

其中，Home.vue 页面可以参考如下代码示例：

<template>
  <div class="home">
    <h1>Home Page</h1>
  </div>
</template>

<style scoped>
.home {
  background-color: #f0f0f0;
}
</style>

配置 Vuex

接下来，需要配置 Vuex，安装命令如下：

npm install vuex

在 src 目录下创建 store.js 文件，配置 Store，具体代码示例如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    cartList: []
  },
  mutations: {
    addCart(state, payload) {
      let cartItem = state.cartList.find(item => item.id === payload.id)
      if (cartItem) {
        cartItem.count += payload.count
      } else {
        state.cartList.push(payload)
      }
    }
  }
})

export default store

集成 Mock 数据

接着，需要集成 Mock 数据，可以使用 Mock.js，安装命令如下：

npm install mockjs

在 src/mock 目录下创建 mock.js 文件，编写 mock 数据，例如：

import Mock from 'mockjs'

Mock.mock('/api/home', 'get', {
  code: 200,
  data: [
    {
      id: 1,
      name: '商品1',
      price: '100',
      image: 'https://img13.360buyimg.com/n7/jfs/t21056/218/579048781/293580/f1699fc2/5b0fa373N7b8e7ef0.jpg'
    },
    {
      id: 2,
      name: '商品2',
      price: '200',
      image: 'https://img14.360buyimg.com/n7/jfs/t30684/343/1554083895/482070/466c5d6d/57da7a3bNb6d861ab.jpg'
    }
  ]
})

并在 main.js 文件中，导入并使用 mock.js 文件，例如：

import '@/mock/mock'

示例一

下面，以首页为例，编写请求 api 接口并展示 mock 数据的代码示例：

<script>
export default {
  name: 'Home',
  data() {
    return {
      productList: []
    }
  },
  created() {
    this.getProductList()
  },
  methods: {
    getProductList() {
      this.$axios.get('/api/home').then(res => {
        if (res.data && res.data.code === 200) {
          this.productList = res.data.data
        }
      })
    }
  }
}
</script>

<template>
  <div class="home">
    <h1>Home Page</h1>
    <ul>
      <li v-for="product in productList" :key="product.id">
        <img :src="product.image" alt="">
        <p>{{ product.name }}</p>
        <p>{{ product.price }}</p>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.home {
  background-color: #f0f0f0;
}
</style>

示例二

下面，以加入购物车为例，演示如何使用 Vuex 的 mutations 方法将商品添加到购物车的代码示例：

<script>
export default {
  name: 'Home',
  data() {
    return {
      productList: []
    }
  },
  created() {
    this.getProductList()
  },
  methods: {
    getProductList() {
      this.$axios.get('/api/home').then(res => {
        if (res.data && res.data.code === 200) {
          this.productList = res.data.data
        }
      })
    },
    addToCart(product) {
      this.$store.commit('addCart', { id: product.id, count: 1 })
      this.$toast('加入成功')
    }
  }
}
</script>

<template>
  <div class="home">
    <h1>Home Page</h1>
    <ul>
      <li v-for="product in productList" :key="product.id">
        <img :src="product.image" alt="">
        <p>{{ product.name }}</p>
        <p>{{ product.price }}</p>
        <button @click="addToCart(product)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.home {
  background-color: #f0f0f0;
}
</style>

至此，以上便是基于 Vue 3.0.1beta 搭建仿京东的电商 H5 项目的完整攻略。