用vite2 vue3开发electron 桌面程序

        vue3已经出来大半年了,加上vite工具,对于开发者开发网页已经非常方便了,比webpack快了很多,但是有想用vite和vue3来开发electron桌面应用的小伙伴还没找到一款可以把他们集成到一起的脚手架或者项目模板。今天给大家介绍一款可以将他们结合在一起的工具。


项目准备

环境:node    

创建项目

npm init evv

终端

先输入项目名称、项目版本、作者、描述 vue是用js还是ts,最后选择css预处理器就创建好了项目。

目录下面多了一个文件夹


目录结构

同时终端有了提示


安装依赖

这时我们根据提示  cd 到目标文件夹,然后使用安装所有依赖,等待所有依赖安装完成。如果安装过慢,请切换镜像。也可以使用yarn安装。

npm install 

运行项目

终端输入npm run dev启动任务

npm run dev

终端显示成功,同时自动启动了electron 窗口

终端


这时项目已经启动了,我们可以在package/render  里面去修改文件看看响应速度。可以看到,修改App.vue文件保存后的瞬间,右边的electron就更新了。非常快!!!!!!!!!!!!!!!electron的界面上的是作者的微信二维码和收款码,如果喜欢可以请作者喝杯奶茶哦!!!

项目打包

项目完成后就可以打包发布了,只需在终端输入,会自动打包,这时会下载打包需要的electron文件。

npm run build


终端结果

这时我们可以在根目录下的build文件夹找到打包好的程序。


安装包

这时我们就可以安装程序看看我们的成果了!!!!!!

你可能感兴趣的:(用vite2 vue3开发electron 桌面程序)