项目初始化
首先，我们需要创建一个基于 Vite 的 Vue 3 + TypeScript 项目，并集成 Pinia。
1.1 创建项目
打开终端，运行以下命令来创建一个新的 Vite 项目： bash Vue3+Pinia+Vite+TS 还原高性能外卖APP项目_超星it
npm init vite@latest takeout-app -- --template vue-ts cd takeout-app
1.2 安装 Pinia
在项目根目录下，运行以下命令安装 Pinia： bash
npm install pinia
2. 项目结构搭建
一个典型的外卖 APP 可能包含以下几个主要模块：商品列表、购物车、用户信息等。我们可以按照功能模块来组织项目结构。 plaintext
takeout-app/ ├── src/ │ ├── api/ # 接口请求相关 │ ├── components/ # 通用组件 │ ├── stores/ # Pinia状态管理 │ ├── views/ # 页面视图 │ ├── App.vue # 根组件 │ ├── main.ts # 入口文件 ├── vite.config.ts # Vite配置文件 ├── package.json # 项目依赖和脚本配置
3. 配置 Vite
在vite.config.ts中，我们可以进行一些基本的配置，例如别名配置： typescript
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, 'src') } } })
4. 状态管理（Pinia）
在src/stores目录下创建一个cart.ts文件，用于管理购物车状态： typescript
import { defineStore } from 'pinia' interface CartItem { id: number name: string price: number quantity: number } export const useCartStore = defineStore('cart', { state: () => ({ items: [] as CartItem[] }), actions: { addToCart(item: CartItem) { const existingItem = this.items.find(i => i.id === item.id) if (existingItem) { existingItem.quantity++ } else { this.items.push({ ...item, quantity: 1 }) } }, removeFromCart(itemId: number) { this.items = this.items.filter(i => i.id !== itemId) } }, getters: { totalPrice: (state) => { return state.items.reduce((total, item) => total + item.price * item.quantity, 0) } } })
5. 页面视图
在src/views目录下创建商品列表页面ProductList.vue和购物车页面Cart.vue。
5.1 ProductList.vue
vue
<template> <div> <h1>商品列表</h1> <ul> <li v-for="product in products" :key="product.id"> {{ product.name }} - {{ product.price }} 元 <button @click="addToCart(product)">加入购物车</button> </li> </ul> </div> </template> <script setup> import { ref } from 'vue' import { useCartStore } from '@/stores/cart' const cartStore = useCartStore() const products = ref([ { id: 1, name: '汉堡', price: 20 }, { id: 2, name: '薯条', price: 10 }, { id: 3, name: '可乐', price: 5 } ]) const addToCart = (product: any) => { cartStore.addToCart(product) } </script>
5.2 Cart.vue
vue
<template> <div> <h1>购物车</h1> <ul> <li v-for="item in cartItems" :key="item.id"> {{ item.name }} - {{ item.price }} 元 x {{ item.quantity }} <button @click="removeFromCart(item.id)">移除</button> </li> </ul> <p>总价: {{ totalPrice }} 元</p> </div> </template> <script setup> import { useCartStore } from '@/stores/cart' const cartStore = useCartStore() const cartItems = cartStore.items const totalPrice = cartStore.totalPrice const removeFromCart = (itemId: number) => { cartStore.removeFromCart(itemId) } </script>
6. 路由配置
安装 Vue Router： bash
npm install vue-router@4
在src目录下创建router目录，并在其中创建index.ts文件： typescript
import { createRouter, createWebHistory } from 'vue-router' import ProductList from '@/views/ProductList.vue' import Cart from '@/views/Cart.vue' const routes = [ { path: '/', name: 'ProductList', component: ProductList }, { path: '/cart', name: 'Cart', component: Cart } ] const router = createRouter({ history: createWebHistory(), routes }) export default router
在main.ts中使用路由： typescript
import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' const app = createApp(App) const pinia = createPinia() app.use(pinia) app.use(router) app.mount('#app')
7. 优化性能
7.1 按需加载
使用 Vue Router 的动态导入来实现按需加载组件： typescript
const routes = [ { path: '/', name: 'ProductList', component: () => import('@/views/ProductList.vue') }, { path: '/cart', name: 'Cart', component: () => import('@/views/Cart.vue') } ]
7.2 缓存组件
使用<KeepAlive>组件来缓存不常变化的组件，减少重复渲染： vue
<template> <div> <router-view v-slot="{ Component }"> <KeepAlive> <component :is="Component" /> </KeepAlive> </router-view> </div> </template>
8. 运行项目
在终端中运行以下命令启动开发服务器： bash
npm run dev
通过以上步骤，你就可以使用 Vue 3、Pinia、Vite 和 TypeScript 构建一个简单的高性能外卖 APP 项目。当然，这只是一个基础框架，你可以根据实际需求进一步完善和扩展功能。
按需加载：使用 Vue Router 的动态导入来实现组件的按需加载。
- 缓存组件：使用
<KeepAlive>组件缓存不常变化的组件。
后端
- 数据库连接池：使用连接池管理数据库连接，减少连接开销。
- 缓存机制：使用 Redis 等缓存工具缓存频繁查询的数据。
运行项目
- 前端：在
takeout-frontend目录下运行npm run dev。 - 后端：在
takeout-backend目录下运行npm run dev。
通过以上步骤，你可以构建一个高性能的外卖应用程序，并且可以根据实际需求进行进一步的扩展和优化。
