Vue3+Pinia+Vite+TS 还原高性能外卖APP项目（完结无秘）

获课：weiranit.fun/192/

获取ZY方打开链接

项目初始化

首先，我们需要创建一个基于 Vite 的 Vue 3 + TypeScript 项目，并集成 Pinia。

1.1 创建项目

打开终端，运行以下命令来创建一个新的 Vite 项目： bash

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

5.2 Cart.vue

vue

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

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。

通过以上步骤，你可以构建一个高性能的外卖应用程序，并且可以根据实际需求进行进一步的扩展和优化。