如何使用yarn創(chuàng)建vite+vue3&&electron多端運行
更新時間：2024年03月13日 10:28:19 作者：代碼の搬運工
這篇文章主要介紹了如何使用yarn創(chuàng)建vite+vue3&&electron多端運行,本文分步驟給大家介紹的非常詳細(xì)，包括使用yarn創(chuàng)建vite+vue3項目會遇到哪些問題，感興趣的朋友跟隨小編一起看看吧
第一步 使用yarn創(chuàng)建vite+vue3項目
yarn create vite
遇到創(chuàng)建報錯看
第二步 引入electron
我這里用的是淘寶鏡像下載的包
cnpm install electron --save-dev
第三步 創(chuàng)建main.js
- 在根目錄創(chuàng)建electron文件夾
- 在electron 文件夾下面創(chuàng)建
main.js
在electron下面的main.js寫入下面代碼
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 1024,
height: 768,
webPreferences: {
nodeIntegration: true
}
});
win.loadURL('http://localhost:5173'); // Vite 默認(rèn)的開發(fā)服務(wù)器地址
win.webContents.openDevTools();
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});第四步 安裝同時運行多條命令npm包&&修改package.json文件
npm包
cnpm install concurrently --save-dev
增加一條electron運行腳本命令
"start:electron": "concurrently \"vite\" \"electron .\""
以下完整代碼
{
"name": "myproject",
"private": true,
"version": "0.0.0",
"main": "electron/main.js",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"start:electron": "concurrently \"vite\" \"electron .\""
},
"dependencies": {
"vue": "^3.4.19"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"concurrently": "^8.2.2",
"electron": "^29.1.1",
"electron-builder": "^24.13.3",
"typescript": "^5.2.2",
"vite": "^5.1.4",
"vue-tsc": "^1.8.27"
}
}效果圖
到此這篇關(guān)于如何使用yarn創(chuàng)建vite+vue3&&electron多端運行的文章就介紹到這了,更多相關(guān)yarn創(chuàng)建vite vue3內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue之如何實現(xiàn)打印功能問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
詳解vue-cli 3.0 build包太大導(dǎo)致首屏過長的解決方案
這篇文章主要介紹了詳解vue-cli 3.0 build包太大導(dǎo)致首屏過長的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
cross-env 是一個非常實用的 Node.js 包,它允許你跨平臺（Windows, macOS, Linux）使用環(huán)境變量,這對于在不同的操作系統(tǒng)上運行腳本時保持一致性非常有用,這篇文章主要介紹了vue cross-env使用和配置方法,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)動態(tài)面包屑導(dǎo)航的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue3中?provide?和?inject?用法小結(jié)
父子組件傳遞數(shù)據(jù)時,使用的是props和emit,父傳子時,使用的是?props,如果是父組件傳孫組件時,就需要先傳給子組件,子組件再傳給孫組件,如果多個子組件或多個孫組件使用時,就需要傳很多次,會很麻煩,這篇文章主要介紹了vue3中?provide?和?inject?用法,需要的朋友可以參考下2023-11-11
詳解Vue改變數(shù)組中對象的屬性不重新渲染View的解決方案
這篇文章主要介紹了詳解Vue改變數(shù)組中對象的屬性不重新渲染View的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue中appear的用法,需要的朋友可以參考下2017-08-08
Vue項目中使用better-scroll實現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項目中使用better-scroll實現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Vue的屬性、方法、生命周期的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實現(xiàn)面包屑功能,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以參考下2023-11-11