Vue + Electron 项目快速上手指南
假如你是个新人，刚拿到公司的前端项目的代码，你会怎么快速上手？
如图：
✨ 先搞懂核心疑问：Vue版本怎么看？Electron是什么？
这两个问题直接从项目根目录的package.json就能找到答案，也是新手入门最先要理清的基础信息，先给你讲透，再继续走上手流程：
1. 快速查看项目Vue版本（超简单）
打开根目录的package.json文件，找到dependencies 依赖项，搜索vue字段，后面跟的版本号就是项目所用的Vue版本：
-
你的项目判定 ：结合项目用了
Element UI、Vue CLI打包模式，能确定是Vue 2.x版本（Vue2和Element UI适配度最高，Vue3对应Element Plus）； -
精准查法 ：直接看
dependencies里的"vue": "^2.6.x"这类字段，^代表兼容该大版本的最新小版本，这是Vue2项目最常见的配置； -
额外验证 ：看
src/main.js入口写法，Vue2是new Vue({})创建实例，Vue3是createApp，一对比就能确认。
2. 通俗讲清：Electron到底是什么？
很多新人刚接触会把它和Vue搞混，它不是Vue的插件 ，而是一个跨平台桌面应用开发框架，核心作用一句话概括：
用前端的Vue/HTML/CSS/JS代码，直接打包成Windows、Mac、Linux系统能直接打开的桌面软件，不用学Java/C++等原生桌面开发语言
-
普通Vue项目：只能跑在浏览器里，是网页应用；
-
Vue+Electron项目：把Vue写的网页"封装"成桌面客户端，像QQ、微信一样双击打开，脱离浏览器运行，还能调用电脑的系统功能（比如本地文件读写、窗口控制）；
-
你的项目就是网页版后台管理系统 ，通过Electron改成了桌面端客户端，所以目录里会有Electron相关依赖和打包配置。
第一步：再读「项目说明书」------核心配置文件（细化版）
理清版本和Electron基础后，再深挖根目录关键文件，吃透项目基础规则，所有配置都藏在这里：
-
package.json（核心中的核心）查启动/构建命令 ：看scripts字段，找到npm run dev（开发启动）、npm run build（网页打包）、npm run electron:build（桌面端打包），直接对应项目运行指令； -
查全量依赖 ：
dependencies是项目运行必需库（Vue、Element UI、Vuex、Electron核心依赖），devDependencies是开发工具（ESLint代码检查、Prettier格式化、打包工具）； -
查项目版本 ：顶部
version字段是项目版本号，vue.config.js会直接读取这个值。
-
vue.config.js（Vue CLI专属配置） 开发端口固定为9527，启动后访问http://localhost:9527； -
打包配置：打包后文件放入
dist文件夹，静态资源放static，部署根路径为/； -
开发规范：开启保存自动校验代码，生产环境关闭调试映射包，减小安装体积；
-
底部带Electron Builder配置，专门用于打包桌面客户端。
-
.env.*环境变量文件分开发环境、生产环境配置，存放接口地址、秘钥等敏感信息； -
只有
VUE_APP_开头的变量，才能在Vue代码里通过process.env.VUE_APP_XXX调用，禁止硬编码敏感信息。
第二步：深入核心------src 目录（业务代码都在这里）
src 是写代码的核心目录，标准结构如下（结合你的项目类型）：
| 目录/文件 | 作用 |
|---|---|
src/main.js |
项目入口，创建 Vue 实例，挂载全局依赖（Element UI、Vuex、Router） |
src/App.vue |
根组件，整个应用的最外层容器 |
src/router/index.js |
路由配置，定义页面跳转规则（如 /login → 登录页） |
src/store/ |
Vuex 状态管理，存放全局共享数据（如用户信息、菜单权限） |
src/views/ |
页面级组件，每个路由对应一个页面（如 Dashboard.vue 首页） |
src/components/ |
公共组件，可复用的 UI 片段（如表格、弹窗、表单） |
src/layout/ |
布局组件，包裹所有页面（如侧边栏、顶部导航栏） |
src/api/ |
接口请求封装，所有后端 API 调用都在这里（基于 axios） |
src/utils/ |
工具函数，如时间格式化、数据校验、Cookie 操作 |
src/assets/ |
静态资源，如图片、字体、全局样式 |
src/settings.js |
全局配置，如项目标题（截图里是 CRMEB）、主题色 |
第三步：跑起来！从 0 到 1 启动项目
-
安装依赖 ：在终端执行
npm install（或yarn install），等待下载所有依赖到node_modules。 -
启动开发服务 ：执行
npm run dev（对应package.json里的 scripts），编译完成后浏览器会自动打开http://localhost:9527，你就能看到项目运行效果。 -
体验热更新 ：修改
src/views/Dashboard.vue里的文字，保存后浏览器会自动刷新，看到修改后的效果。 -
打包测试 ：执行
npm run build，生成dist文件夹，这就是生产环境的代码（Electron 项目还会有打包桌面应用的命令，如npm run electron:build）。
第四步：新人必看注意事项⚠️（适配Vue2+Electron项目）
-
Vue2专属注意：不要混用Vue3语法（比如组合式API、setup语法糖），你的项目是Vue2，沿用选项式API写法，避免报错；
-
代码规范：项目配置ESLint+Prettier，VS Code安装对应插件，保存自动格式化，不规范代码会直接拦截运行；
-
环境变量：敏感配置全放.env文件，绝不写死在业务代码里，方便切换开发/生产环境；
-
依赖管理：禁止手动修改node_modules文件夹，新增依赖用npm install 包名，同步提交package.json和锁文件，保证团队依赖一致；
-
Git提交规范：按照.gitignore文件，忽略node_modules、dist、本地环境文件，只提交业务源码和配置；
-
Electron核心避坑 ：严格区分主进程 （Node环境，管桌面窗口、系统功能）和渲染进程（Vue网页环境），跨进程通信用专属api，不许在Vue里直接调用Node原生API；
-
调试技巧：安装Vue DevTools浏览器插件，专门调试Vue2组件和Vuex状态，开发效率翻倍；
-
端口权限：默认9527端口无需管理员权限，修改为80等特殊端口才需要提权，新手不用改动。
-
代码规范 ：项目配置了
eslint+prettier，写代码时要遵守规范，否则会报错。建议在 VS Code 安装「ESLint」「Prettier」插件，保存时自动格式化代码。 -
环境变量 ：不要在代码里硬编码敏感信息（如接口地址），统一放在
.env.*文件里，通过process.env.VUE_APP_XXX访问。 -
依赖管理 ：不要手动修改
node_modules，新增依赖用npm install 包名，并提交package.json和package-lock.json（保证团队依赖版本一致）。 -
Git 提交 ：看
.gitignore文件，不要提交node_modules、dist、.env.local等文件，只提交源码和配置。 -
Electron 特殊注意：
-
区分主进程 （Node.js 环境，管理窗口、系统功能）和渲染进程（浏览器环境，写 Vue 页面）。
-
跨进程通信需要用
ipcRenderer/ipcMain，不要直接在 Vue 里调用 Node.js API。
-
-
调试技巧：开发环境用 Chrome DevTools 的「Vue DevTools」插件，调试 Vue 组件和 Vuex 状态非常方便。
-
权限问题 ：如果要把端口改成 80，需要管理员权限（Mac 用
sudo，Windows 用管理员终端），但项目默认是 9527，不需要权限。
第五步：学习路径建议（循序渐进）
-
先跑通项目，熟悉「启动 → 热更新 → 打包」流程。
-
从一个简单页面（如
Dashboard.vue）入手，看它的路由、组件、API 调用逻辑。 -
学习 Vue 核心概念：组件化、路由、生命周期、Vuex 状态管理。
-
学习 Element UI 组件库，掌握常用组件（表格、表单、弹窗）的用法。
-
逐步了解业务逻辑：用户登录、权限控制、菜单渲染等。