vue3 + ts + electron 搭建桌面开发框架

先准备一个 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

-
	- - -
    -- --
	-- -
		-- - --
		-- - - - -
	--
	-- -
		-- --
		-- --
		-- -
			-- -
		--
		-- -
			-
		--
        -- -
			-- --
			-- -
		--
		-- -
	-
    - - -
-

启动

- --- -----

运行效果