大学生期末移动端水果商城项目vue3+vant4+pinia+vuerouter+mockjs

由于这是一个完整的项目，我将提供一个简化版的代码示例来说明如何使用Vue 3、Vant 4、Pinia、Vue Router和Mock.js来创建一个水果商城的基本框架。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import pinia from './stores';
import Vant from 'vant';
import 'vant/lib/index.css';
 
const app = createApp(App);
 
app.use(router);
app.use(pinia);
app.use(Vant);
 
app.mount('#app');

// ./stores/index.js
import { createPinia } from 'pinia';
 
export const pinia = createPinia();

// ./router/index.js
import { createRouter, createWebHistory } from 'vue-router';
 
// 导入页面组件
import Home from '../views/Home.vue';
import FruitDetails from '../views/FruitDetails.vue';
import Cart from '../views/Cart.vue';
 
const routes = [
  { path: '/', component: Home },
  { path: '/fruit/:id', component: FruitDetails },
  { path: '/cart', component: Cart }
];
 
const router = createRouter({
  history: createWebHistory(),
  routes
});
 
export default router;

// ./views/Home.vue
<template>
  <div class="home">
    <!-- 水果列表 -->
    <van-grid :column-num="2">
      <van-grid-item v-for="fruit in fruits" :key="fruit.id" :icon="fruit.icon" :text="fruit.name"/>
    </van-grid>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import mockFruits from '../mock/fruits';
 
const fruits = ref(mockFruits);
const router = useRouter();
 
// 点击水果跳转到详情页
function goToDetails(fruitId) {
  router.push(`/fruit/${fruitId}`);
}
</script>

这个示例展示了如何设置Vue 3应用程序的基础，包括Vant组件库、Pinia状态管理和Vue Router路由管理。同时，使用Mock.js模拟了一些水果数据，展示了如何在Vue 3中使用组合式API（<script setup>）。这个简化的代码片段仅展示了项目的基础框架，并没有包含详细的功能实现，如购物车功能和支付功能。