先准备一个 vue3 + ts 的新项目
安装 electron
1、跟普通 vue 项目下载插件一样,安装 electron。
- - --------------- -
2、打包工具 electron-builder 建议全局安装
- - ---------------- -
编写主进程
在项目的根目录下,创建 electron-main-process > index.js
- -
- -
----
-
- - -----
- -----------
- --- -
---------- - - ----
------------------------ - - - - - ---------
--------------- -- - -
---------- - --
--
-
-------- --------------
-------- -- - -
- ----------- - -- -
----
-
---
编写渲染进程
1、将 src 目录修改为 electron-render-process。
2、修改 tsconfig.json
-
-- -
-- --
-- --
-- --
-- --
-- --
-- --
-- --
-- --
-- --
-- --
-- --
-- --
-- -
-
--
-- -
-- -
-
-
--
-- -
--
--
--
-
-
--
-- -
--
--
--
--
-
--
-- -
-
-
-
3、新建 vue.config.js
- -
-------- - -
-- --
-- --
-- --
-- ----------- - --
-- --
-- -
-- --
-- -
-- --
-- -
-
-
-
编写启动、打包程序
1、图标配置 electron > icon > logo.icns
2、启动程序,electron > serve.js
- -
----------- - --
- ---- - -----
- -------- - -----
- ----- - -------
- - - -----
- ------- - - ------------- - -------------
---------------
---------------
- ------- - --------------
- ---- - ------------- -
-- -
--
--
--
--
--
--
--
--
-
-
--
------------ ----- ------------- - -
----
------ - -
------------
--
- --- -
- ---- - -
--
----------------- --
-
- --------------- - ----------- -----
---------------------- --- - -
----------
--
---------------------- --- - -
----------
--
-------------------- -- - -
------------
--
-
3、打包程序,electron > build.js
- -
----------- - --
- ---- - -----
- ------- - -----
- - - -----
- --- - -----
-----------
-----------
- ------- - - ------------- - -------------
---------------
---------------
- ------- - ---------------
- ---- - ------------- -
-- -
--
--
--
--
--
--
--
--
-
-
--
------------ ----- ------------- - -
----
------ - -
------------
--
- --- -
---
-- -
-- ----------------- --
--
-- -
-- --
-- --
-- ----------------- --
--
-- -
----------- - ---
--
-- -
-- --
-- ----
-- --
-- ---
--
-
-- ----
-- -
-
-
--
-- -
-- ----------- - --
-- ----------- - -
--
-- -
- ------
- -----
-- -
---
- -----
-- -
--
--
-- -
-- --- -- -- --
--
-- --
-- -
-- --- -- - -
- ---- - ---------- -
---------
- - -
-------------
-- --
-- -
----
-
--
-
4、package.json
-
- - -
-- --
-- -
-- - --
-- - - - -
--
-- -
-- --
-- --
-- -
-- -
--
-- -
-
--
-- -
-- --
-- -
--
-- -
-
- - -
-
启动
- --- -----