搭建Electron+Vue3项目模板,可帮助前端开发者快速搭建Electron+Vue3的项目,本项目是在electron-vite-vue上集成了前端常用的一些技术框架,例如Pinia、Axios、Sass、Typescript、Element-plus、Electron-log、sqlite3等技术,并且对Axios和Electron-log进行了二次封装。
如果觉得不错,麻烦给个Star吧(#^.^#)
- Node: 18.0或更高版本
1、克隆项目
git clone https://gitee.com/anyaoqi/electron-vue3.git
2、下载依赖
npm install
或
pnpm install
3、运行项目
npm run dev
基础框架:electron-vite-vue
官网地址:https://electron-vite.github.io/
github地址:https://github.com/electron-vite/electron-vite-vue
- Vue3
- Electron
- Vue-router
- Pinia
- Axios
- Vite
- Sass
- TypeScript
- Vueuse
- Element-plus
- 本地数据库:Sqlite3
- 本地日志:electron-log
- electron 主进程
- electron\database 数据库相关
- electron\preload.ts 预加载文件
- electron\main.ts 主进程入口
- electron\logger.ts 日志工具封装
- src 渲染进程
- src\pages 页面
- src\components 公共组件
- src\router 路由
- src\pinia 状态管理
- src\styles 全局样式
- src\apis 接口
- src\utils 常用工具
- types 数据类型
- config 全局配置
- public 静态资源
- release Electron打包输出
- dist Vue打包输出
- vite.config.ts Vite配置
- electron-builder.js 打包配置
- tsconfig.json TypeScript配置
- binding_sqlite3 sqlite编译文件
主进程:electron\logger.ts
渲染进程:src\utils\logger.ts
文件位置:src\apis\axios.ts
- 日志位置:C:\Users\username\AppData\Roaming\electron-vue3\logs
- sqlite数据库:C:\Users\username\AppData\Roaming\electron-vue3\database.db
开发环境启动项目
生产环境打包项目
在浏览器中预览查看项目