零基础上手 Vue3 → 写一个全新成绩录入页面 → 用 axios 对接你昨天的 Tomcat + Servlet 后端 → 成功拿到成绩列表 + 平均分，页面漂亮展示

最终要达到的目的

全程我带你一步步来，不用瞎看乱七八糟教程，只学够用的，直接落地你的项目。

1. Vue3 最简入门步骤
2. 页面现成布局代码（直接复制用）
3. axios 对接后端的完整代码
4. 帮你调跨域、调接口、联调报错全部搞定

咱们今天直接把标准前后端分离完整跑通！😎🚀

安装vs code后安装哪些依赖

要做vue3肯定就需要,vs code的软件，那么它需要装哪些依赖？

给你零基础讲清楚：Vue3 + VS Code 必装东西，一步不绕弯

我给你分两块：第一 VS Code 要装的插件、第二 Vue3 项目要装的依赖，你照着装完直接就能开发、对接你的 Java 后端。

先装 VS Code 必备插件（直接搜名字安装）

打开 VS Code（VS Code都没装的自己去看其他教程装） → 左侧扩展，搜下面 5 个，全部装上：

其他的我就不举例了，装完咱们就继续配置 Vue3 环境！

1. Vue - OfficialVue3 官方插件，语法高亮、代码提示、报错标红，必装。
2. HTML CSS Supporthtml、css 智能提示。
3. Chinese (Simplified)整个软件变成中文，看着舒服。
4. Auto Save自动保存，不用每次手动 Ctrl+S。
5. Axios Snippets后面写请求有代码片段，省事。

   
   举例，4.在VS Code左边的扩展，你输入Auto Save

   

   选第一个 Auto-Save on Window Change 就对了！
   
   其他我就不举例了。

---

再装 VS Code 必装的依赖Node.js

做 Vue3必须装 Node.js，不然没法创建项目、装依赖。

下载地址https://nodejs.org/zh-cn/download/

1. 装好 Node 之后，打开 cmd 输入：

node -v
npm -v

能出版本号就是装成功了。

然后才是创建Vue3项目

我们用命令创建 Vue3 项目（最简版，一共 4 步）

先说说：为什么大家都用命令创建？

用 npm create vite@latest 这类命令创建，是目前最主流、最不容易出问题的方式

我给你整理最傻瓜、最不容易错的版本，直接复制粘贴就能用👇

---

第 1 步：打开终端

• 运行- CMD

---

第 2 步：输入创建命令（复制这条）

npm create vite@latest

npm create vite@latest 本身不挑盘，你终端当前在哪个目录，项目就建在哪个目录下，你只需要先 cd 到你想存项目的盘符位置就行。

第一条命令弹出一堆选择框：项目名？框架选哪个？(Vue / React / Angular...)语言选什么？

npm create vite@latest

这里其实你还可以输入下面这给个命令
npm create vite@latest my-vue3 -- --template vue
第二条命令直接创建好 Vue3 项目，不用选择，不用确认，全自动建好。

npm create vite@latest my-vue3 -- --template vue

以上创建命令二选一，看你个人的 习惯
 

命令拆解

• ✅ npm create vite@latest：正确，调用最新版 Vite 脚手架
• 直接按回车就行，它现在是在问你「是否确认安装 create-vue@3.22.3 这个工具来创建项目」，默认选项是 (y)。

---

第 3 步：进入项目文件夹

cd my-vue3

---

第 4 步：安装依赖 + 启动项目

npm install
npm run dev

---

✅ 最终 4 行命令（这是这4步的命令总结）

npm create vite@latest my-vue3 -- --template vue
cd my-vue3
npm install
npm run dev

执行完，浏览器会自动打开你的 Vue3 项目！

---

超简单总结

1. 创项目
2. 进文件夹
3. 装依赖
4. 启动

总结极简版（你照着做就行）

1. VS Code 装 5 个插件：Vue-Official、中文包、HTML CSS Support、自动保存、Axios 片段
2. 电脑安装 Node.js
3. 命令创建 Vue3 项目
4. 项目里 npm install
5. 再装一个：npm install axios

装完这些，你就能直接写 Vue3 页面，完美对接前面JAVA项目的 Servlet 后端，做前后端分离。
 

项目初始化配置与运行命令

# 1. 进入刚刚创建好的 Vue3 项目文件夹（必须先进入项目才能执行后面命令）
cd vue-project
# 2. 安装项目需要的所有基础依赖（自动下载 node_modules 文件夹）
npm install
# 3. 单独安装 axios 插件（用来发送网络请求，比如调用接口）
npm install axios
# 4. 启动 Vue3 项目，启动后会生成一个本地访问地址
npm run dev

中间运行的我就不写了




运行成功后，你会看到一个地址比如：

http://localhost:5173/

---

执行完后，终端会给你一个地址（比如 http://localhost:5173/），打开浏览器访问这个地址，能看到 Vue 默认页面，就代表前端环境完全搞定了！

然后就是最重要的东西了，以后要运行项目必开的黑窗口，这个窗口要一直开着，前后端才能顺利联调

给你们手搓一个txt一键启动运行小黑窗的命令，后面改成.bat格式一键运行命令

改成.bat文件

最终这样就成功了！

🎉