# electron-app

**Repository Path**: Chenfangyijie_code/electron-app

## Basic Information

- **Project Name**: electron-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-09
- **Last Updated**: 2026-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron

一个基于 **Electron + Vite + Vue 3 + TypeScript** 的项目模板。

---

## 一、快速开始

### 1.1 官网资源

| 资源 | 网址 |
|------|------|
| Evite | https://evite.netlify.app/ |
| Vue Router | https://router.vuejs.org/ |
| Pinia | https://pinia.vuejs.org/ |

### 1.2 项目初始化

#### 方式一：使用 degit（推荐）

```bash
npx degit alex8088/electron-vite-boilerplate electron-app
```

#### 方式二：使用 Git 克隆

```bash
git clone https://gitclone.com/github.com/alex8088/electron-vite-boilerplate.git electron-app
```

### 1.3 启动项目

```bash
cd electron-app
npm install
npm run dev
```

### 1.4 常用命令

| 命令 | 描述 |
|------|------|
| `npm install` | 安装项目依赖 |
| `npm run dev` | 启动开发服务器 |
| `npm run build` | 构建生产版本 |
| `npm run lint` | 执行 ESLint 检查 |
| `npm run format` | 执行 Prettier 格式化 |
| `npm run typecheck` | 执行 TypeScript 类型检查 |

---

## 二、路由配置

### 2.1 安装 Vue Router

```bash
npm install vue-router
```

### 2.2 创建路由配置文件

**文件路径**：`src/renderer/src/router/index.ts`

```typescript
import { createMemoryHistory, createRouter, type RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: () => import('@renderer/views/HomeView.vue'),
    meta: {
      title: '首页',
      requiresAuth: false
    }
  },
  {
    path: '/list',
    name: 'list',
    component: () => import('@renderer/views/ListView.vue'),
    meta: {
      title: '列表页',
      requiresAuth: false
    },
    beforeEnter: (to, _from, next) => {
      console.log('进入列表页前的独享守卫')
      next()
    }
  }
]

export const router = createRouter({
  history: createMemoryHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  console.log(`路由跳转: ${from.path} -> ${to.path}`)
  if (to.meta.requiresAuth) {
    const isLoggedIn = true
    if (!isLoggedIn) {
      next('/')
      return
    }
  }
  next()
})

router.beforeResolve(() => {
  console.log('全局解析守卫完成')
})

router.afterEach((to, from) => {
  console.log(`路由跳转完成: ${from.path} -> ${to.path}`)
  if (to.meta.title) {
    document.title = `Electron App - ${to.meta.title}`
  }
})
```

### 2.3 注册路由

**文件路径**：`src/renderer/src/main.ts`

```typescript
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router/index'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const store = createPinia()
store.use(piniaPluginPersistedstate)
createApp(App).use(router).use(store).mount('#app')
```

### 2.4 创建页面组件

**HomeView.vue** - `src/renderer/src/views/HomeView.vue`

```vue
<template>
  <div>
    <h1>HomeView</h1>
  </div>
</template>
```

**ListView.vue** - `src/renderer/src/views/ListView.vue`

```vue
<template>
  <div>
    <h1>ListView</h1>
  </div>
</template>
```

### 2.5 使用 Router View

**文件路径**：`src/renderer/src/App.vue`

```vue
<template>
  <div>
    <nav style="padding: 20px; background: #f5f5f5; margin-bottom: 20px;">
      <router-link to="/" style="margin-right: 20px;">首页</router-link>
      <router-link to="/list">列表页</router-link>
    </nav>
    <router-view />
  </div>
</template>
```

---

## 三、Pinia 状态管理

### 3.1 安装依赖

```bash
npm install pinia
npm install pinia-plugin-persistedstate
```

### 3.2 注册插件

**文件路径**：`src/renderer/src/main.ts`

```typescript
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
//导入路由
import { router } from './router/index'
// 状态管理
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const store = createPinia()
store.use(piniaPluginPersistedstate)
createApp(App).use(router).use(store).mount('#app')
```
### 3.3 创建 Store

**文件路径**：`src/renderer/src/store/index.ts`

```typescript
/**
 * Pinia Store 配置文件
 * 定义应用的全局状态管理
 */
import { defineStore } from 'pinia'

/**
 * Counter 状态管理 Store
 * 用于管理计数器相关的状态和操作
 */
export const useCounterStore = defineStore('counter', {
  /**
   * 状态定义
   */
  state: () => ({
    count: 0
  }),

  /**
   * 计算属性（Getters）
   */
  getters: {
    doubleCount: (state) => state.count * 2
  },

  /**
   * 操作方法（Actions）
   */
  actions: {
    increment(step = 1) {
      this.count += step
    },
    decrement(step = 1) {
      this.count -= step
    },
    reset() {
      this.count = 0
    }
  },

  /**
   * 持久化配置（使用 pinia-plugin-persistedstate）
   */
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'counter-store',
        storage: localStorage
      }
    ]
  }
})
```



### 3.4 在组件中使用

**文件路径**：`src/renderer/src/views/ListView.vue`

```vue
<template>
  <div>
    <h1>发电机房打开</h1>
    <p>计数: {{ counterStore.count }}</p>
    <p>双倍计数: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment()">增加</button>
    <button @click="counterStore.decrement()">减少</button>
    <button @click="counterStore.reset()">重置</button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/store/index'

const counterStore = useCounterStore()
console.log(counterStore.count)
</script>
```

---

## 四、代理配置 和 请求封装

### 4.1 代理配置

**文件路径**：`electron.vite.config.ts`

```typescript
import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin, bytecodePlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin(), bytecodePlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin(), bytecodePlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src'),
        '@views': resolve('src/renderer/src/views'),
        '@store': resolve('src/renderer/src/store')
      }
    },
    server: {
      proxy: {
        '/api': {
          target: 'http://uat.crm.xuexiluxian.cn',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
    plugins: [vue()]
  }
})
```

### 4.2 请求封装

**安装 axios**

```bash
npm install axios
```

**文件路径**：`src/renderer/src/utils/request.ts`

```typescript
import axios from 'axios';

const request = axios.create({
  baseURL: '/api'
});

request.interceptors.request.use(function (config) {
  return config;
}, function (error) {
  return Promise.reject(error);
});

request.interceptors.response.use(function (response) {
  return response.data;
}, function (error) {
  return Promise.reject(error);
});

export default request;
```

### 4.3 登录接口

**文件路径**：`src/api/login.ts`

```typescript
import request from '@utils/request'

export const loginApi = (data) => {
  return request({
    url: '/u/loginByJson',
    method: 'post',
    data
  })
}
```

### 4.4 登录接口调用

**文件路径**：`src/renderer/src/views/HomeView.vue`

```vue
<template>
  <div>
    <h1>HomeView</h1>
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script setup lang="ts">
import { loginApi } from '@api/login'

const handleLogin = async () => {
  try {
    const res = await loginApi({
      username: 'admin',
      password: '123456',
      key: '123456',
      captcha: '1234'
    })
    console.log(res)
  } catch (error) {
    console.error('登录失败:', error)
  }
}
</script>
```

---

## 五、路径别名配置

### 5.1 Vite 配置

**文件路径**：`electron.vite.config.ts`

```typescript
import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin, bytecodePlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin(), bytecodePlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin(), bytecodePlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@': resolve('src/renderer/src'),
        '@renderer': resolve('src/renderer/src'),
        '@views': resolve('src/renderer/src/views')
      }
    },
    plugins: [vue()]
  }
})
```

### 5.2 TypeScript 配置

**文件路径**：`tsconfig.web.json`

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/renderer/src/*"],
      "@renderer/*": ["src/renderer/src/*"]
    }
  }
}
```

---

## 五、项目结构

```
electron-app/
├── src/
│   ├── main/              # 主进程代码
│   ├── preload/           # 预加载脚本
│   └── renderer/          # 渲染进程代码
│       └── src/
│           ├── router/    # 路由配置
│           ├── store/     # Pinia 状态管理
│           ├── views/     # 页面组件
│           ├── components/# 公共组件
│           └── assets/    # 静态资源
├── electron.vite.config.ts
├── tsconfig.json
└── package.json
```