之前为大家介绍过通过Vite脚手架创建Vue3-TS前端项目的创建，本章为大家介绍的是通过Vite脚手架创建全栈项目的教程，前端用Vue3后端用Nestjs，全栈使用PNPM命令进行，npm和yarn命令请各位自行掌握。

一、创建项目文件夹

以管理员身份打开命令提示符CMD窗口，并进入所要创建项目的根目录，并创建项目文件夹，文件夹名称可根据自己的需求进行命名，作者文件夹名称为：blog-zbs-all

# 创建主项目文件夹
mkdir blog-zbs-all

#进入主项目文件夹
cd blog-zbs-all

1、项目初始化

进入主项目文件夹并对主项目进行初始化进行配置；

# 初始化项目
pnpm init

2、配置 package.json

配置 package.json 文件，添加必要的脚本；

{
  "name": "blog-zbs-all",
  "version": "1.0.0",
  "description": "Vue3+TypeScript+NestJS 个人博客全栈项目",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "concurrently \"pnpm start:frontend\" \"pnpm start:backend\"",
    "start:frontend": "cd frontend && pnpm dev",
    "start:backend": "cd backend && pnpm start:dev",
    "build:frontend": "cd frontend && pnpm build",
    "build:backend": "cd backend && pnpm build",
    "install:all": "pnpm install && cd frontend && pnpm install && cd ../backend && pnpm install"
  },
  "keywords": [
    "vue3",
    "typescript",
    "nestjs"
  ],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.18.1",
  "devDependencies": {
    "concurrently": "^9.2.1"
  }
}

二、创建前后端项目并安装对应依赖

1、安装前端项目及依赖

安装前端安装Vue3-TS，并配置前端项目依赖，前端项目文件名：frontend

# 安装命令
pnpm create vite frontend --template vue-ts
 
# 进入前端文档
cd frontend

# 安装依赖
pnpm install

2、安装后端项目及依赖

1.首先安装 NestJS CLI：

# 安装nestjs/cli
pnpm add -g @nestjs/cli

2.安装后端项目及依赖

# 创建后端项目-选择pnpm
nest new backend

# 进入后端目录
cd backend

# 安装必要依赖
pnpm install

# 返回主目录
cd ..

三、前后端重要配置

1、配置前端代理（frontend/vite.config.ts），以便正确访问后端 API：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173, // 前端端口
    proxy: {
      "/api": {
        target: "http://localhost:3000", // 后端地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

2、配置后端添加所需依赖

# 配置 cors 跨域
pnpm add cors @types/cors

重点：配置要在backend后端项目文档内配置

3、配置后端跨域（backend/src/main.ts）：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import cors from 'cors';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  // 配置跨域
  app.use(
    cors({
      origin: 'http://localhost:5173', // 允许前端域名访问
      credentials: true,
    }),
  );
  await app.listen(3000); // 后端端口
}
void bootstrap();

四、安装全栈项目依赖

# 全量安装依赖
pnpm install:all

五、安装重要插件concurrently

# 安装重要插件
pnpm add concurrently -D

六、同时启动前后端项目

# 同时启动前后端项目
pnpm start

七、分别构建前后端项目的生产环境

# 配置前端生产环境
pnpm build:frontend

# 配置后端生产环境
pnpm build:backend

八、启动项目

1、前端项目启动

链接：http://localhost:5173

2、后端项目启动

链接：http://localhost:3000

恭喜啦！全栈项目基本安装与配置就完成了！