????????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文件夾找到打包好的程序。
安裝包
這時我們就可以安裝程序看看我們的成果了!!!!!!