stars

介绍

本项目基于开源的electron构建脚手架：electron-vite-vue搭建
博客讲解：electron+vue3全家桶专栏
视频讲解：electron+vue3全家桶视频讲解合集

该工程已集成所有使用案例均放在 compoents/demo 目录下

技术栈

技术	描述	学习地址
electron	写前端的方式开发桌面端	官网
vite	新一代前端构建工具	官网
vue3	渐进式前端框架	官网
typescript	js 的超集，强类型语言	菜鸟教程
element-plus	前端 ui 框架	文档地址
axios	请求发送	官网
pinia	全局状态管理	官网
Vue Router	路由管理	官网
vue-i18n	国际化	官网
sass	Sass 是 CSS 的一种预编译语言，提供变量、嵌套规则等	官网
mockjs	模拟数据	官网

开始

该项目开发使用的node环境为 16.19.0，建议node版本在其之上
配置 npm 镜像

# 指定 npm 国内镜像
npm config set registry=https://registry.npmmirror.com/
# 指定 Electron 的国内镜像地址
npm config set electron_mirror=https://npmmirror.com/mirrors/electron/

或者简单粗暴，直接改 C:\Users[用户].npmrc

registry=https://registry.npmmirror.com/
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

安装依赖

npm i

快速删除 node_modules

# 全局安装依赖
npm install rimraf -g
# 项目根目录执行
rimraf node_modules

工程目录结构

+ ├─┬ electron
+ │ ├─┬ main
+ │ │ └── index.ts    Electron主进程入口
+ │ └─┬ preload
+ │   └── index.ts    预加载ts脚本
  ├─┬ src
  │ ├── main.ts       Electron-渲染进程入口[即vue相关页面构建代码]
  | ├── assets        静态资源目录
  | ├── components    封装的vue组件目录
  | ├── directive     自定义指令
  | ├── hooks         组合式函数封装
  | ├── locales       国际化，多语言支持
  | ├── store         全局状态管理
  | └── utils         ts工具类
  ├── index.html
  ├── package.json
  └── vite.config.ts