✅ 步骤总览（基于 Vite + Vue3）
| 阶段 | 内容 |
|---|---|
| 1️⃣ 安装工具 | 安装 Node.js 与 Vite 脚手架 |
| 2️⃣ 初始化项目 | 使用 npm create vite@latest |
| 3️⃣ 安装依赖 | 安装 Vue、UI 框架、路由、状态管理器等 |
| 4️⃣ 目录结构调整 | 创建 views/, router/, store/ 等文件夹 |
| 5️⃣ 启动开发 | 本地运行 + 自动热更新 |
| 6️⃣ 构建发布 | 打包部署到生产环境 |
🛠️ 详细步骤
✅ 第 1 步：安装 Node.js 和 Vite（只需一次）
- 安装 Node.js：nodejs.org/
- 初始化 Vite 项目：
npm create vite@latest
按照提示选择：
✔ Project name: » my-vue-app
✔ Select a framework: » Vue
✔ Select a variant: » JavaScript / TypeScript
然后进入项目：
cd my-vue-app
npm install
✅ 第 2 步：启动开发服务器
npm run dev
浏览器访问 http://localhost:5173，你将看到 Vue 欢迎页面。
✅ 第 3 步：安装 Vue Router / Pinia（可选）
npm install vue-router pinia
✨ 安装 UI 框架（任选其一）
- Element Plus（PC）：
npm install element-plus
- Vant（移动端）：
npm install vant
✅ 第 4 步：基础目录结构建议
src/
├── assets/ # 静态资源
├── components/ # 公共组件
├── views/ # 页面组件
├── router/ # vue-router 配置
├── store/ # pinia 模块
├── utils/ # 工具函数
├── App.vue
└── main.js / main.ts
✅ 第 5 步：创建 Router（示例）
// 配置router
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: () => import('@/views/About.vue') }
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
// 注册router
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');
// 使用 router
<template>
<router-view />
</template>
✅ 第 6 步：打包构建
npm run build
生成的 dist/ 目录即为可部署文件，可上传到 nginx、GitHub Pages、Vercel、Netlify 等。
🎁 可选增强配置
| 目的 | 工具 / 库 |
|---|---|
| 状态管理 | Pinia |
| 接口请求封装 | Axios |
| 项目规范 | ESLint + Prettier |
| Mock 接口 | Mock Service Worker（msw） |
| 动画过渡 | Animate.css 或 Vue Transitions |
| 单元测试 | Vitest / Jest |
