Vue 3 运行指南

Vue 3

v3.4.x

TypeScript

 Vue 3 是一个渐进式 JavaScript 框架，以其简洁的语法和出色的性能著称。 结合 Composition API，可以构建出结构清晰、易于维护的前端应用。 

项目结构

frontend

src

main.ts // 应用入口

App.vue // 根组件

components // 公共组件

ui // UI 组件库

common // 通用组件

views // 页面组件

HomeView.vue

LoginView.vue

router // 路由配置

index.ts

stores // 状态管理 (Pinia)

user.ts

composables // 组合式函数

api // API 请求

assets // 静态资源

public // 公共文件

.env.example // 环境变量示例

package.json

vite.config.ts

tsconfig.json

第 2 步：安装依赖

运行以下命令安装项目所需的依赖包：

bashfrontend

        $
        pnpm install

注意

首次安装可能需要几分钟，请耐心等待。

安装完成后，你会看到类似这样的输出：

Packages: +xxx
Done in xxx.xxxs

第 4 步：启动开发服务器

运行以下命令启动前端开发服务器：

bashfrontend

        $
        pnpm run dev

启动成功后，你会看到类似这样的输出：

  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

🎉 启动成功！

前端应用正在 http://localhost:5173 运行

与后端联调

确保后端已启动

前端需要与后端 API 通信。在运行前端之前，请确保：

后端服务已启动并运行在配置的地址（默认 http://localhost:3000）
环境变量 VITE_API_URL 配置正确

跨域问题

 如果遇到跨域错误，检查后端是否配置了 CORS 允许前端地址。 生成的项目通常已经配置好，如有问题请查看后端的 CORS 配置。 

常用命令速查

特性	说明
pnpm run dev	启动开发服务器（热更新）
pnpm run build	构建生产版本
pnpm run preview	预览生产构建
pnpm run lint	代码检查
pnpm run type-check	TypeScript 类型检查

下一步

前端已启动！

现在你可以开始开发或测试你的应用了。

同时运行前后端 → 部署到服务器

Vue 3 运行指南 ​

Vue 3

项目结构 ​

第 2 步：安装依赖 ​

第 4 步：启动开发服务器 ​

与后端联调 ​

确保后端已启动 ​

常用命令速查 ​

下一步 ​