# electron_vue3

**Repository Path**: IT-bear/electron_vue3

## Basic Information

- **Project Name**: electron_vue3
- **Description**: 一个开箱即用的 electron框架,使用 electron + Vue + ElementPlus + Vite + Ts 搭建
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: https://gitee.com/IT-bear
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 4
- **Created**: 2024-10-30
- **Last Updated**: 2025-10-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 桌面开发, Electron, Vue, TypeScript, vite

## README

# Electron模板

相关配置:

- [VITE5](https://www.vitejs.net/) + [ELECTRON](https://www.electronjs.org/zh/docs/latest/) + [VUE3](https://v3.cn.vuejs.org/guide/introduction.html#%E8%B5%B7%E6%AD%A5) + [ELEMENT-PLUS](https://element-plus.org/zh-CN/component/button.html) + [VUE-ROUTER](https://router.vuejs.org/zh/introduction.html) + [PINIA](https://pinia.web3doc.top/)

#### 架构

- 技术栈采用了 electron + vue3 + vite5 + TS + pinia + element-plus + vue-router + axios
- 框架支持scss语法
- 配置了按需引入以及自动导入
- 配置了 eslint 代码规范，可根据自己喜好修改

#### 使用说明

- 框架基于 Vue3 `<script setup lang='ts'>` 写法;
- 项目 node 以及 npm 版本,搭建环境为 node v22.10.0 npm v10.9.0;
- 可用于学习与交流;
- 如发现问题或建议可在评论区留言, 看到会及时处理;
- 如有需求亦可在评论区留言,或自行在此项目基础上增加;
- 该项目为初始框架未开发任何业务,可自行开发;
- 喜欢就点个star吧!

### 目录结构

```shell

├─ resources                # 静态资源
├─ src                      # 项目源码
│   ├─ main                 # 主进程
│   ├─ preload              # 预加载进程
│   └─ renderer             # 渲染进程
│       └─ src              # 页面源码
│           ├─ api          # 接口文件
│           ├─ assets       # 静态资源
│           ├─ components   # 组件
│           ├─ router       # 路由
│           ├─ store        # 全局状态管理
│           ├─ utils        # 工具函数
│           └─ views        # 页面
└─ # 其他配置文件

```

### 下载依赖

```bash
$ npm install
```

### 运行

#### 开发环境

```bash
$ npm run dev
```

#### 生产环境

```bash
$ npm run start
```

### 打包

#### 打包前请删除 dist 文件夹

```bash
# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux
```

### 备注

#### 编写跳转页面时,在路径前面添加一个'#'

##### 示例

```bash
location.href = '#/login'
```

##### 项目配置了vue-router,也可以使用如下方式跳转

```bash
const router = useRouter()
router.push('/login')
```