创建应用#

使用 electron-vite 快速搭建一个项目

1
npm create @quick-start/electron@latest

测试打包#

1
npm run build:win

配置打包

electron-builder.yml中 nsis 的配置

1
nsis:
2
  artifactName: ${name}-${version}-setup.${ext}
3
  shortcutName: ${productName}
4
  uninstallDisplayName: ${productName}
5
  createDesktopShortcut: always  # 始终创建桌面快捷方式
6
  oneClick: false                 # 一键安装（直接安装，不显示界面） true=一键安装 false=手动安装
7
  perMachine: false             # 仅当前用户安装（true=所有用户） true=所有用户 false=当前用户
8
  allowElevation: true          # 允许提权（如需安装到 Program Files） true=允许 false=不允许
9
  allowToChangeInstallationDirectory: true  # 用户选择安装路径 true=允许 false=不允许
10
  runAfterFinish: true          # 安装完成后自动运行应用 true=允许 false=不允许
11
  # silent: true               # 完全静默（无任何界面，适合企业部署）

prettier/prettier 格式化问题#

修改.prettierrc.yml 添加

1
endOfLine: auto

修改`env.d.ts`文件#

添加以下代码

1
declare module '*.vue' {
2
  import { DefineComponent } from 'vue'
3
  const component: DefineComponent<{}, {}, any>
4
  export default component
5
}

目的:

TypeScript 默认不支持 .vue 文件 TypeScript 只认识 .ts、.js 等文件类型，需要通过声明文件告诉它如何处理 .vue 文件。
Vue SFC 的特殊性 .vue 文件由 <template>、<script> 和 <style> 组成，编译后会变成一个 JavaScript 对象（组件选项）。这段代码帮助 TypeScript 理解这种转换。
避免 IDE（如 VS Code）报错 如果没有这个声明，VS Code 会提示模块找不到或类型错误，即使代码能正常运行。

渲染进程配置#

安装element ui#

1
npm install element-plus --save

修改main.ts 添加一下代码

1
import ElementPlus from 'element-plus'
2
import 'element-plus/dist/index.css'
3
import zhCn from 'element-plus/es/locale/lang/zh-cn' // 中文语言包
4

5
const app = createApp(App)
6

7
app.use(ElementPlus, {
8
  locale: zhCn
9
})

router 路由#

1
npm install vue-router@4

创建src/router/index.ts

注意！！！！！！！！！

路由模式一定要是createWebHashHistory 如果是createWebHistory，打包之后的页面会无法显示

1
import { createMemoryHistory, createRouter } from 'vue-router'
2

3
import HomeView from './HomeView.vue'
4
import AboutView from './AboutView.vue'
5

6
const routes = [
7
  {
8
    path: '/',
9
    component: HomeView
10
  },
11
  {
12
    path: '/about',
13
    component: AboutView
14
  }
15
]
16

17
const router = createRouter({
18
  history: createWebHashHistory(),
19
  routes
20
})
21
export default router

layout配置#

问题：

当设置height: 100vh; 出现滚动条那是因为body 的问题
```
1
body {
2
  margin: 0;
3
}
```

新建一个layout文件夹里面只存放布局相关的页面

index.vue

1
<template>
2
  <el-container style="height: 100vh">
3
    <MenuComponent />
4
    <PlanMain />
5
  </el-container>
6
</template>
7

8
<script setup lang="ts">
9
import MenuComponent from '@/layout/menu/menu.vue'
10
import PlanMain from '@/layout/main/planMain.vue'
11
</script>
12

13
<style scoped></style>

main/planMain.vue

1
<template>
2
  <el-main>
3
    <router-view></router-view>
4
  </el-main>
5
</template>
6

7
<script setup lang="ts"></script>
8

9
<style scoped></style>

menu/menu.vue

1
<template>
2
  <el-aside width="200px" class="full-height-aside">
3
    <el-menu
4
      class="el-menu-vertical-demo full-height-menu"
5
      router
6
      :default-active="$route.path"
7
      :collapse="isCollapse"
8
      @open="handleOpen"
9
      @close="handleClose"
10
    >
11
      <el-menu-item index="/home">
12
        <el-icon><icon-menu /></el-icon>
13
        <template #title>首页</template>
14
      </el-menu-item>
15
      <el-menu-item index="/planManage">
16
        <el-icon><CircleCheck /></el-icon>
17
        <template #title>任务管理</template>
18
      </el-menu-item>
19
      <el-menu-item index="/logRecord">
20
        <el-icon><document /></el-icon>
21
        <template #title>日志管理</template>
22
      </el-menu-item>
23
      <el-menu-item index="/settingManage">
24
        <el-icon><setting /></el-icon>
25
        <template #title>设置</template>
26
      </el-menu-item>
27
    </el-menu>
28
  </el-aside>
29
</template>
30

31
<script setup lang="ts">
32
import { ref } from 'vue'
33
import { Document, Menu as IconMenu, Setting, CircleCheck } from '@element-plus/icons-vue'
34

35
defineOptions({
36
  name: 'MenuComponent'
37
})
38

39
const isCollapse = ref(false)
40
const handleOpen = (key: string, keyPath: string[]) => {
41
  console.log(key, keyPath)
42
}
43
const handleClose = (key: string, keyPath: string[]) => {
44
  console.log(key, keyPath)
45
}
46
</script>
47

48
<style scoped>
49
/* 关键样式 */
50
.full-height-aside {
51
  height: 100%;
52
  overflow-y: auto; /* 垂直滚动 */
53
  overflow-x: hidden; /* 隐藏水平滚动 */
54
  /* border-right: 3px solid #eee; */
55
}
56

57
.full-height-menu {
58
  height: 100%;
59
  /* 继承父级高度 */
60
  overflow-y: hidden; /* 禁用垂直滚动 */
61
  border-right: inset; /* 可选：移除默认边框 */
62
}
63

64
/* 保留原有样式 */
65
.el-menu-vertical-demo:not(.el-menu--collapse) {
66
  width: 100%;
67
}
68
</style>

还要修改路由 router/index.ts

1
import { createWebHistory, createRouter } from 'vue-router'
2

3
import Layout from '@/layout/index.vue'
4
import HomeView from '@/views/home/index.vue'
5
import logRecord from '@/views/logRecord/index.vue'
6
import planManage from '@/views/planManage/index.vue'
7
import settingManage from '@/views/settingManage/index.vue'
8
const routes = [
9
  {
10
    path: '/',
11
    component: Layout,
12
    redirect: '/home',
13
    children: [
14
      {
15
        path: '/home',
16
        component: HomeView
17
      },
18
      {
19
        path: '/logRecord',
20
        component: logRecord
21
      },
22
      {
23
        path: '/planManage',
24
        component: planManage
25
      },
26
      {
27
        path: '/settingManage',
28
        component: settingManage
29
      }
30
    ]
31
  },
32
  {
33
    path: '/',
34
    redirect: '/home'
35
  }
36
]
37

38
const router = createRouter({
39
  history: createWebHistory(),
40
  routes
41
})
42
export default router

pinia配置#

安装

1
npm install pinia

修改main.ts 添加以下代码

1
import { createPinia } from 'pinia'
2

3
/* 创建pinia */
4
const pinia = createPinia()
5
/* 使用插件 */
6
app.use(pinia)

新建一个store目录

在store目录下新建一个index.ts

1
// 引入defineStore用于创建store
2
import { defineStore } from 'pinia'
3
// 定义并暴露一个store
4
export const useToolStore = defineStore('count', {
5
  // 动作
6
  actions: {},
7
  // 状态
8
  state() {
9
    return {
10
      planState: 1
11
    }
12
  },
13
  // 计算
14
  getters: {}
15
})

使用

1
import { useToolStore } from '@renderer/store'
2

3
// 存储状态
4
const toolStore = useToolStore()
5
const { planPriorityList, planTypeList } = toolStore

安装sqlite#

1
npm install sqlite3

调试

1
import sqlite3 from 'sqlite3'
2

3
app.whenReady().then(() => {
4
  const dbDir = join(app.getPath('userData'), 'database')
5

6
  // 保证目录存在
7
  if (!fs.existsSync(dbDir)) fs.mkdirSync(dbDir)
8
  // 打开 SQLite 数据库（如果没有则自动创建）
9
  db = new sqlite3.Database(join(dbDir, 'mydb.sqlite'))
10

11
  console.log('ddbDir', dbDir)
12

13
  // 创建 plans 表
14
  db.run(
15
    `
16
    CREATE TABLE IF NOT EXISTS plans (
17
      id INTEGER PRIMARY KEY AUTOINCREMENT,
18
      planName TEXT NOT NULL,
19
      planPriority TEXT,
20
      planType TEXT,
21
      sort INTEGER DEFAULT 0,
22
      stratTime TEXT,
23
      endTime TEXT,
24
      createTime TEXT DEFAULT CURRENT_TIMESTAMP
25
    )
26
  `
27
  )
28

29
  // 创建 signins 表
30
  db.run(
31
    `
32
    CREATE TABLE IF NOT EXISTS signins (
33
      id INTEGER PRIMARY KEY AUTOINCREMENT,
34
      planId INTEGER,
35
      type TEXT,
36
      isDaily INTEGER DEFAULT 0,
37
      time TEXT DEFAULT CURRENT_TIMESTAMP,
38
      FOREIGN KEY(planId) REFERENCES plans(id)
39
    )
40
  `
41
  )
42

43
})

注意#

在IPC通信时如果是TS，类型一定要匹配上

之后在preload定义完接口后还需要在index.d.ts定义一遍

1
import { ElectronAPI } from '@electron-toolkit/preload'
2
// 👉 添加对 window.api 的类型定义
3
import type { Plan, PageInfo } from '@main/types/db' // 根据你实际路径调整
4

5
export interface PlanApi {
6
  getAllPlans(): Promise<any>
7
  getPlans(plan: Partial<Plan>, pageInfo: PageInfo): Promise<any>
8
  addPlan(plan: Plan): Promise<any>
9
  updatePlan(plan: Plan): Promise<any>
10
  deletePlan(id: number): Promise<any>
11
  getQuerySignin(): Promise<any>
12
  queryPlanProgress(): Promise<any>
13
  signinToday(): Promise<any>
14
  planAloneSign(planId: number): Promise<any>
15
  querySignList(): Promise<any>
16
}
17

18
declare global {
19
  interface Window {
20
    electron: ElectronAPI
21
    planApi: PlanApi
22
  }
23
}

打包注意#

如果打包安装后的应用是空白页，检查路由配置

Vue Router 默认的 createWebHistory() 模式 依赖 HTML5 history API，这在 Electron 的 file:// 协议中会导致无法路由跳转（页面路径不会匹配成功，页面内容空白）。

将createWebHistory() 改为 createWebHashHistory

1
import { createRouter, createWebHashHistory } from 'vue-router'
2

3
const router = createRouter({
4
  history: createWebHashHistory(),
5
  routes: [...]
6
})