从针灸学习网站到Vue3项目：我是如何用VSCode+Element Plus快速搭建前端原型的

从针灸学习网站到Vue3项目：我是如何用VSCode+Element Plus快速搭建前端原型的

去年冬天，我在学习中医针灸时萌生了一个想法：能否开发一个交互式学习平台，将经络穴位可视化？这个念头让我重新拾起前端开发技能。经过两周的摸索，我用Vue3+Element Plus在VSCode中完成了原型开发，整个过程就像搭积木一样有趣。本文将分享这个"从想法到界面"的完整历程，特别适合想快速验证创意的开发者。

1. 项目构思与技术选型

针灸学习网站需要三个核心功能：穴位数据库、交互式经络图和学习进度跟踪。经过技术调研，我选择了以下方案：

• Vue3：组合式API更适合复杂交互逻辑
• Element Plus：提供现成的表单、导航等组件
• VSCode：内置调试工具和Vue插件支持

技术栈对比表：

提示：选择技术栈时要考虑社区支持度，Vue3的TypeScript支持对后期维护很重要

2. 开发环境配置实战

2.1 初始化Vue3项目

在空目录下执行：

npm init vue@latest acupuncture-learning

安装向导中我选择了：

• TypeScript
• Pinia
• Router
• ESLint

安装完成后目录结构如下：

acupuncture-learning/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── router/ │ ├── stores/ │ ├── views/ │ ├── App.vue │ └── main.ts ├── .eslintrc.js └── package.json

2.2 集成Element Plus

安装组件库：

cd acupuncture-learning npm install element-plus @element-plus/icons-vue

配置main.ts：

import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app')

3. 核心功能开发记录

3.1 穴位数据管理

在stores/创建acupointStore.ts：

import { defineStore } from 'pinia' export const useAcupointStore = defineStore('acupoints', { state: () => ({ points: [ { name: '合谷穴', meridian: '手阳明大肠经', location: '手背第1、2掌骨间', functions: ['止痛', '退热'] } ] }) })

3.2 经络图组件开发

创建components/MeridianMap.vue：

<template> <el-card> <svg width="600" height="400"> <!-- 经络路径 --> <path v-for="path in meridianPaths" :d="path.d" stroke="red" fill="none" /> <!-- 穴位点 --> <circle v-for="point in points" :cx="point.x" :cy="point.y" r="8" fill="blue" @click="showDetail(point)" /> </svg> </el-card> </template>

4. VSCode调试技巧

配置.vscode/launch.json实现一键调试：

{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}/src" } ] }

调试时发现的三个典型问题：

1. 热更新失效 → 检查vite.config.ts的server配置
2. Element Plus样式丢失 → 确保main.ts正确引入CSS
3. Pinia状态不持久 → 使用localStorage插件

5. 界面优化与部署

5.1 使用Element Plus布局

App.vue基础结构：

<template> <el-container> <el-header> <h1>针灸穴位学习系统</h1> </el-header> <el-container> <el-aside width="200px"> <el-menu router> <el-menu-item index="/">经络图</el-menu-item> <el-menu-item index="/list">穴位列表</el-menu-item> </el-menu> </el-aside> <el-main> <router-view /> </el-main> </el-container> </el-container> </template>

5.2 生产环境构建

优化vite配置：

export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { elementPlus: ['element-plus'] } } } } })

部署命令：

npm run build

这个项目最终实现了穴位查询、经络图交互和记忆卡片功能。Element Plus的Table组件用来展示穴位数据，Timeline组件记录学习进度，整体开发效率比预期高了40%。