Node.js工具安装VUE3开发以及创建VUE工程项目实战

原创 于 2025-12-15 14:16:02 发布 · 797 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#node.js #vue.js #前端

本地还没有安装 Node.js，

1️⃣ 下载 Node.js

  1. 打开官网：https://nodejs.org/

  2. 点击 LTS（长期支持版） 下载 Windows 安装包（.msi 文件）

    • LTS 比较稳定，推荐用来做项目开发

2️⃣ 安装 Node.js

  1. 双击下载的 .msi 文件
  2. 勾选 “Add to PATH” 选项（默认勾选即可）
  3. 点击下一步，保持默认选项安装完成

3️⃣ 验证安装

打开新的 CMD 或 PowerShell，输入：

node -v
npm -v
  • 如果显示版本号，比如 v20.5.0 和 9.8.0，说明安装成功

4️⃣ 安装 Vue CLI（全局）

npm install -g @vue/cli

验证：

vue --version
  • 输出版本号，例如 @vue/cli 5.0.8 就说明 Vue CLI 安装成功

✅ 安装完成后，你就可以创建 Vue3 项目

一、创建 Vue3 项目

首先确保你安装了 Node.js 和 Vue CLI。然后执行：

# 安装 Vue CLI（如果没安装）
npm install -g @vue/cli

# 创建 Vue3 项目
vue create stats-frontend
  • 选择 Vue 3（默认配置即可）
  • 进入项目目录：
cd stats-frontend
  • 启动项目：
npm run serve

默认访问地址：http://localhost:8080

二、项目目录结构（关键部分）

假设你项目名是 stats-frontend，目录结构大致如下：

stats-frontend/
├── node_modules/          # npm 安装的依赖
├── public/
│   └── index.html         # 静态页面入口（浏览器直接加载的 HTML）
├── src/
│   ├── main.js            # Vue 项目入口文件，创建 Vue app
│   ├── App.vue            # 根组件，所有组件挂载在这里
│   ├── components/        # Vue 组件目录
│   │   └── StatForm.vue   # 我们写的统计表单组件
│   └── api/               # 与后端通信封装目录
│       └── api.js         # 封装 axios 调用 FastAPI API
├── package.json           # 项目信息及依赖
├── package-lock.json      # npm 锁文件
└── babel.config.js        # Babel 配置

三、主要文件作用说明

文件作用开发重点
public/index.html静态 HTML 模板，Vue 会替换 #app div 内容一般不用修改，只修改 <title> 或 favicon
src/main.jsVue 应用入口，创建 Vue app、挂载根组件可以在这里引入全局插件，比如 router、store、axios
src/App.vue根组件，所有子组件挂载在这里放置主要页面结构，或者嵌套不同组件
src/components/StatForm.vueVue 组件，写你的表单主要开发文件：编写表单、绑定数据、提交事件
src/api/api.js封装与后端 FastAPI 的接口调用主要开发文件：提交表单数据、获取数据列表
package.json项目依赖、脚本管理安装依赖、运行项目命令

总结：前端主要写 components 下的 Vue 组件 和 api 下的接口调用。

四、实现 HTML 表单的 Vue3 版本

1️⃣ 封装接口

src/api/api.js:

import axios from "axios";

const apiClient = axios.create({
  baseURL: "http://127.0.0.1:8000/api/v1", // FastAPI 后端地址
  headers: { "Content-Type": "application/json" },
});

export default {
  createStat(data) {
    return apiClient.post("/stats", data); // 对应 FastAPI 的 POST /stats
  },
};

2️⃣ 创建表单组件

src/components/StatForm.vue:

<template>
  <div>
    <h1>Create Stat Record</h1>
    <form @submit.prevent="submitForm">
      <label>Category:</label><br>
      <input v-model="category" type="text" required /><br>
      <label>Value:</label><br>
      <input v-model.number="value" type="number" required /><br><br>
      <button type="submit">Submit</button>
    </form>
    <p v-if="msg">{{ msg }}</p>
  </div>
</template>

<script>
import api from "../api/api";

export default {
  data() {
    return {
      category: "",
      value: null,
      msg: ""
    };
  },
  methods: {
    async submitForm() {
      try {
        await api.createStat({ category: this.category, value: this.value });
        this.msg = "Record created successfully!";
        this.category = "";
        this.value = null;
      } catch (err) {
        this.msg = "Error submitting data!";
      }
    }
  }
};
</script>
  • v-model 双向绑定表单数据
  • @submit.prevent 阻止默认提交，调用 Vue 方法
  • 调用 api.createStat() 发送 POST 请求到 FastAPI

3️⃣ 根组件引入

src/App.vue:

<template>
  <div id="app">
    <StatForm />
  </div>
</template>

<script>
import StatForm from "./components/StatForm.vue";

export default {
  components: { StatForm }
};
</script>
  • 根组件只负责挂载子组件
  • 所有前端交互都在 StatForm.vue 完成

4️⃣ FastAPI 配置 CORS（允许跨域）

app/main.py:

from fastapi.middleware.cors import CORSMiddleware

origins = [
    "http://localhost:8080",  # Vue 开发服务器
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
  • 这样 Vue 能直接调用 FastAPI API

五、运行项目

  1. 启动 FastAPI：
uvicorn app.main:app --reload
  1. 启动 Vue：
npm run serve
  1. 访问 http://localhost:8080，你会看到 Vue3 表单页面，提交数据会写入 PostgreSQL 数据库。

六、总结

  • Vue 前端开发主要在：

    • components/ 下的组件写界面和逻辑
    • api/ 下封装接口调用 FastAPI
    • App.vue 负责挂载组件

  • public/index.html 只作为入口模板

  • FastAPI 后端提供 API 服务，前端通过 Axios 调用

项目实战

  1. 提交表单（新增统计记录）
  2. 数据列表（实时显示数据库里的记录）
  3. 完整目录结构和文件说明

假设 FastAPI 后端已经提供 /api/v1/stats 的 GET 和 POST 接口。

一、项目目录结构（前端部分）

stats-frontend/
├── public/
│   └── index.html          # Vue 入口模板
├── src/
│   ├── main.js             # Vue 项目入口
│   ├── App.vue             # 根组件
│   ├── api/
│   │   └── api.js          # 封装 Axios 调用 FastAPI API
│   └── components/
│       ├── StatForm.vue    # 提交表单组件
│       └── StatList.vue    # 数据列表组件
├── package.json
└── package-lock.json

二、封装 API 调用

src/api/api.js：

import axios from "axios";

const apiClient = axios.create({
  baseURL: "http://127.0.0.1:8000/api/v1", // FastAPI 地址
  headers: { "Content-Type": "application/json" },
});

export default {
  getStats() {
    return apiClient.get("/stats");
  },
  createStat(data) {
    return apiClient.post("/stats", data);
  },
};

三、提交表单组件

src/components/StatForm.vue：

<template>
  <div>
    <h2>Create Stat Record</h2>
    <form @submit.prevent="submitForm">
      <label>Category:</label><br>
      <input v-model="category" type="text" required /><br>
      <label>Value:</label><br>
      <input v-model.number="value" type="number" required /><br><br>
      <button type="submit">Submit</button>
    </form>
    <p v-if="msg">{{ msg }}</p>
  </div>
</template>

<script>
import api from "../api/api";

export default {
  props: {
    onSubmitted: Function, // 父组件传递的刷新列表方法
  },
  data() {
    return {
      category: "",
      value: null,
      msg: "",
    };
  },
  methods: {
    async submitForm() {
      try {
        await api.createStat({ category: this.category, value: this.value });
        this.msg = "Record created successfully!";
        this.category = "";
        this.value = null;
        if (this.onSubmitted) this.onSubmitted(); // 提交后刷新列表
      } catch (err) {
        this.msg = "Error submitting data!";
      }
    },
  },
};
</script>

四、数据列表组件

src/components/StatList.vue：

<template>
  <div>
    <h2>Stat Records</h2>
    <table border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>Category</th>
          <th>Value</th>
          <th>Created At</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="stat in stats" :key="stat.id">
          <td>{{ stat.id }}</td>
          <td>{{ stat.category }}</td>
          <td>{{ stat.value }}</td>
          <td>{{ stat.created_at }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import api from "../api/api";

export default {
  data() {
    return {
      stats: [],
    };
  },
  methods: {
    async fetchStats() {
      const res = await api.getStats();
      this.stats = res.data;
    },
  },
  mounted() {
    this.fetchStats();
  },
};
</script>

五、根组件挂载

src/App.vue：

<template>
  <div id="app">
    <StatForm :onSubmitted="refreshList" />
    <StatList ref="statList" />
  </div>
</template>

<script>
import StatForm from "./components/StatForm.vue";
import StatList from "./components/StatList.vue";

export default {
  components: { StatForm, StatList },
  methods: {
    refreshList() {
      this.$refs.statList.fetchStats();
    },
  },
};
</script>
  • StatForm 提交数据
  • StatList 显示列表
  • refreshList() 提交成功后刷新列表

六、FastAPI 后端 CORS 配置

app/main.py：

from fastapi.middleware.cors import CORSMiddleware

origins = ["http://localhost:8080"]  # Vue 开发服务器

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

七、运行项目

  1. 启动 FastAPI：
uvicorn app.main:app --reload
  1. 启动 Vue：
npm run serve

访问 http://localhost:8080，即可看到 表单 + 数据列表，提交表单会立即写入 PostgreSQL 数据库，并更新列表。

这套前端架构的特点：

  • 组件化：StatForm.vue、StatList.vue 分离
  • 易于扩展：后续可以加分页、过滤、图表
  • 与 FastAPI 对接干净：通过 api.js 封装接口
【优质书籍推荐】Vue.js+Node.js全栈开发实战
weixin_43178406的博客
04-20 1万+
本文深入讲解了全栈开发巨作：《Vue.js+Node.js全栈开发实战（第2版）》，希望能对学习Java的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书特色 2.3 作者简介 2.4 本书目录 2.5 适合读者 3. 购买链接
Node.js与Vue.js全栈开发实战要点总结
weixin_42608299的博客
05-13 584
本文旨在总结《Vue.js+Node.js全栈开发实战》一书的核心内容，详细介绍了Node.js和Vue.js的基础知识、开发环境搭建、核心模块应用，以及两个实战项目的构建过程。通过对书中内容的提炼，为读者提供了一份实战开发的指南。
【优质书籍推荐】Node.js+MongoDB+Vue.js全栈开发实战
热门推荐
weixin_43178406的博客
04-26 1万+
本文深入讲解了全栈开发巨作：《Node.js+MongoDB+Vue.js全栈开发实战》，希望能对学习全栈开发的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书作者 2.3 本书目录 2.4 适合读者 3. 购买链接
全栈项目实战：Vue3+Node.js开发博客系统
2501_91537388的博客
05-11 1194
全栈项目实战：Vue3+Node.js开发博客系统
全栈实战：Node.js后端 + Vue.js前端商城系统
weixin_56524251的博客
01-04 1387
本文概述了商城系统的技术栈与界面设计，详细阐述了前端Vue.js、后端Node.js与Express框架、以及MySQL数据库的应用。同时，文章深入介绍了商城系统前台的购物车、订单处理、个人中心及搜索商品功能，以及后台管理的用户统计、商品统计、商品管理、用户管理和评论管理功能。这些功能共同构成了商城系统的完整框架，为用户提供了流畅且交互性强的购物体验，为管理员提供了高效且全面的管理工具。
【图书介绍】《Node.js+MongoDB+Vue.js全栈开发实战》
夏天又到了的专栏
04-25 1968
为了紧跟时代技术潮流，《Node.js+MongoDB+Vue.js全栈开发实战》前端部分所讲的是当前十分火热的Vue 3和TypeScript，而后端部分则是Node.js、MongoDB及其相关技术。虽然《Node.js+MongoDB+Vue.js全栈开发实战》介绍的是全栈开发，但实际上书中内容更侧重于后端。书中所涵盖的知识点是全栈开发求职面试中必须掌握的内容，而如果熟悉MongoDB，则必然是加分项。
新书速览|Node.js+MongoDB+Vue.js全栈开发实战
quanzhankaifaqua的博客
04-25 775
著有《Vue.js 2.x实践指南》《ASP.NET MVC企业级实战》《Javscript实用教程》《H5+移动应用实战开发》《Node+MongoDB+React项目实战开发》《Vue3.x+TypeScript实践指南》。《Node.js+MongoDB+Vue.js全栈开发实战》所涵盖的知识点是全栈开发面试求职中必须掌握的内容，而如果熟悉。虽然《Node.js+MongoDB+Vue.js全栈开发实战》介绍的是全栈开发，但实际上书中内容更。、Web全栈开发初学者、Web前端开发人员、Web全栈。
前（vue3）后（node.js）端项目实战
mygoes
09-27 2182
前后端项目实战
Vue.js+Node.js开发实战：从入门到项目上线
互动出版网
12-21 2534
《Vue.js+Node.js开发实战：从入门到项目上线》以JavaScript语言为基础，以一个完整的网站开发过程为主线，介绍了一整套面向Web项目的开发技术，如使用Node.js搭建服务端，使用NoSQL数据库管理数据，使用Vue.js搭建前端UI，使用Nginx部署代码，使用Git管理版本等。通过阅读《Vue.js+Node.js开发实战：从入门到项目上线》，读者可以掌握从网站开发到网站上线的全过程。 《Vue.js+Node.js开发实战：从入门到项目上线》分为10章，涵盖的主要内容有购买域名、网
Vue 3 + Node.js 全栈项目.zip
12-31
Vue 3 + Node.js 全栈项目，自实现 web 终端 + 命令系统，支持使用输入命令的方式来操作，前端使用vue3，vite2，AntDesign Vue3 组件库，Pinia2 状态管理，TS类型控制，Eslint登，后端使用Node.js，Express等 ...
精选资源
仿拼多多团购商城项目实战Vue2.x+Node.js(源码)
01-02
在本项目"仿拼多多团购商城项目实战Vue2.x+Node.js(源码)"中，开发者将体验到一个全面的电商应用开发流程，结合了前端的Vue2.x框架和后端的Node.js技术栈。这个实战项目旨在帮助学习者深入理解和应用相关技术，提升...
精选资源
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
1. **环境搭建**：介绍如何安装Node.js，使用npm或yarn安装Vue CLI，创建和配置新项目。 2. **基础语法**：讲解Vue实例、模板语法、数据绑定、计算属性、条件与循环指令、事件处理等基础用法。 3. **组件开发**：...
精选资源
vue.js+node.js 实战项目视频及源码
12-18
在本资源中，你将学习如何结合 Vue.js 和 Node.js 进行实战项目的开发，具体是构建一个播放器应用。Vue.js 是一个轻量级的前端JavaScript框架，它以其组件化、易上手和高性能而受到广泛欢迎。Node.js 则是一个基于...
精选资源
基于node.js+vue技术开发的购物商城系统源代码+数据库
04-18
这是一个基于Node.js后端技术和Vue.js...总之，这个项目为学习Node.js和Vue.js的开发者提供了一个实际的应用场景，通过研究源代码，可以深入了解这两个技术在实际项目中的应用，同时也能了解到完整的电商系统开发流程。
Node.js 编程实战：自定义模块与包发布全流程解析
tenkofx的博客
12-09 928
Node.js 默认支持 CommonJS 模块规范，因此创建模块非常简单。只需要创建一个.js文件，通过或exports暴露功能即可。// math.jsadd自定义模块是 Node.js 中最基础也最关键的部分，而包发布则是 Node.js 生态中最具工程价值的能力。通过掌握从模块拆分、结构设计，到 npm 发布的完整流程，你能够让自己的代码真正进入生态、被更多开发者使用，这也是开源精神的重要体现。
Windows 下使用 nvm 安装与管理 Node.js（完整指南）
m0_73246652的博客
12-10 1352
本文详细介绍了在Windows系统上使用nvm-windows管理Node.js版本的方法。主要内容包括：1）卸载原有Node.js的准备工作；2）nvm-windows的下载安装步骤；3）使用nvm安装和切换Node.js版本；4）常用nvm命令速查表；5）常见问题解决方案。文章特别强调了安装前的环境清理、镜像源配置等注意事项，并提供了管理员权限运行、多版本管理等实用技巧。通过nvm-windows，开发者可以轻松管理多个Node.js版本，提高开发效率。
Node.js模块化入门指南
weixin_67448099的博客
12-06 1532
Node.js 运行时环境和浏览器运行时环境，除了提供的 API 存在差异外，另一个重要的区别在于 Node.js 为 JavaScript 提供了模块化的管理特性。Node.js 的模块管理遵循两种规范：ES Module 和 CommonJS。本节课主要介绍了 ES Module 规范下模块的创建和引入的语法。
【开题答辩全过程】以 基于Node.js的医院预约挂号系统为例，包含答辩的问题和答案
最新发布
shiji5078的博客
12-14 231
本文介绍了一位具有14年经验的毕设指导专家，擅长Java、PHP等多种开发语言。以"基于Node.js的医院预约挂号系统"为例，展示了毕业答辩的全过程，包括技术选型理由、核心功能实现方案及评委提问要点。系统采用Node.js+Express+Vue技术栈，包含预约挂号、支付退款、药品管理等模块，重点解决了并发预约控制问题。文中提供了完整的答辩问答记录，并建议学生独立完成毕设，同时表示可提供开题报告参考、源码支持等服务。评委认为该设计方案可行，技术实现合理，最终开题获得通过。
【上位机之【Electron+Node.js+SFTP】简单案例】
商务合作/软件定制/学习交流
12-10 132
这篇文章介绍了一个基于Electron的SFTP客户端应用开发。项目结构包含主进程(main.js)、预加载脚本(preload.js)、渲染进程界面(index.html)等核心文件。通过ssh2-sftp-client库实现SFTP功能，包括连接服务器、列出目录、上传下载文件等操作。主进程与渲染进程通过IPC通信，预加载脚本安全地暴露API给渲染进程。界面采用简洁设计，包含表单输入和操作按钮。该应用可作为跨平台的SFTP文件管理工具，支持Windows、macOS和Linux系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

计算衎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值