🚀 从「空文件夹」从零新建一个完整 Vue 项目（1:1 复刻你要的结构）
我给你最详细、一步不跳、绝对能跑通的步骤，从空文件夹开始，直接建出你要的 Vue 项目。
一、准备工作
-
新建一个空文件夹（比如叫 my-vue-project，放在桌面）
-
用 VS Code 打开这个空文件夹（注意：是打开文件夹，不是单独打开文件）
-
打开 VS Code 终端（快捷键 Ctrl + `，Tab 键上方）
二、分两种方案（按你需求选）
方案一：你要的「能跑 npm run serve 的 Vue2 项目」（和你之前老项目完全一致）
- 初始化项目（在空文件夹终端执行）
1. 初始化 package.json（一路回车，用默认配置）
npm init -y
2. 全局安装 Vue CLI（只需要装一次，以后不用再装）
npm install -g @vue/cli
3. 用 Vue CLI 创建 Vue2 项目（在当前空文件夹创建，项目名就是当前文件夹名）
vue create .
- 关键配置（必须这么选，才能和你结构一致）
执行 vue create . 后，按以下步骤选：
-
选择 Manually select features（手动配置），回车
-
勾选 Router（必须选，才能有 router 文件夹），其他默认，回车
-
选择 2.x（Vue2 版本，绝对不能选 3.x），回车
-
Use history mode for router? 选 Y 回车
-
剩下的配置直接回车，用默认即可
-
安装依赖 + 启动
1. 安装依赖（第一次必须执行）
npm install
2. 启动项目（就是你要的 npm run serve！）
npm run serve
✅ 启动成功，地址 http://localhost:8080，结构完全和你之前的一致：
• 自动生成 src/assets、src/router、src/views、App.vue、main.js
• package.json 里自带 "serve": "vue-cli-service serve"
方案二：现在主流的「Vite + Vue3 项目」（启动命令 npm run dev，更快更轻量）
- 初始化项目（在空文件夹终端执行）
1. 用 Vite 一键创建 Vue3 项目（当前文件夹名就是项目名）
npm create vite@latest . -- --template vue
2. 安装依赖
npm install
3. 启动项目
npm run dev
✅ 启动成功，地址 http://localhost:5173，结构和你现在的 Vite 项目一致。
三、创建完后，1:1 复刻你截图里的结构
- 自动生成的基础结构（Vue2/Vue3 都有）
my-vue-project/
├── node_modules/
├── public/
├── src/
│ ├── assets/ # 静态资源（css、图片）
│ ├── components/ # 公共组件（你截图里的 Child.vue 放这）
│ ├── router/ # 路由配置（index.js）
│ ├── views/ # 页面组件（Home.vue、Doctor.vue 等）
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── package.json
└── package-lock.json
-
手动补全你截图里的内容
-
在 src/assets/ 里：新建 css 文件夹，放入你的 back.png、doctor.png 等图片
-
在 src/components/ 里：新建 Child.vue，粘贴你截图里的子传父代码
-
在 src/views/ 里：新建 AgeSelect.vue、Doctor.vue、Patient.vue 等页面
-
在 src/router/index.js 里：配置这些页面的路由
四、你截图里的 Child.vue 代码（直接复制用）
<template>
<div>
<p>子组件：{{ msg }}</p>
<button @click="toParent">点我传值给父</button>
</div>
</template>
<script setup>
// 父传子 高频
const props = defineProps({
msg: String
})
// 子传父 高频
const emit = defineEmits(['get-child'])
const toParent = () => {
emit('get-child', '我是子组件数据')
}
</script>
五、终极避坑指南（绝对不踩雷）
-
终端目录必须正确：永远在项目根目录（和 package.json 同级）执行 npm 命令
-
命令区分：
◦ Vue2（Vue CLI）：npm run serve
◦ Vue3（Vite）：npm run dev
-
第一次必须装依赖：新建项目后，先 npm install，再启动
-
空文件夹创建：用 vue create . 或 npm create vite@latest .，. 代表当前文件夹，不会再套一层文件夹
六、现在你只需要做
-
打开空文件夹的 VS Code 终端
-
复制方案一的命令，一步步执行
-
1 分钟就能跑通 npm run serve，结构和你要的完全一致
需要我给你一份父组件接收子组件传值的完整代码，直接和这个 Child.vue 配对使用吗？