用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文件夾找到打包好的程序。


安裝包

這時我們就可以安裝程序看看我們的成果了!!!!!!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容