如何使用yarn創(chuàng)建vite+vue3&&electron多端運(yùn)行
更新時間：2024年03月13日 10:28:19 作者：代碼の搬運(yùn)工
這篇文章主要介紹了如何使用yarn創(chuàng)建vite+vue3&&electron多端運(yùn)行,本文分步驟給大家介紹的非常詳細(xì)，包括使用yarn創(chuàng)建vite+vue3項(xiàng)目會遇到哪些問題，感興趣的朋友跟隨小編一起看看吧
第一步 使用yarn創(chuàng)建vite+vue3項(xiàng)目
yarn create vite
遇到創(chuàng)建報(bào)錯看
創(chuàng)建vite項(xiàng)目報(bào)錯
第二步 引入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();
}
});第四步 安裝同時運(yùn)行多條命令npm包&&修改package.json文件
npm包
cnpm install concurrently --save-dev
增加一條electron運(yùn)行腳本命令
"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多端運(yùn)行的文章就介紹到這了,更多相關(guān)yarn創(chuàng)建vite vue3內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 框架下自定義滾動條(easyscroll)實(shí)現(xiàn)方法
這篇文章主要介紹了vue 框架下自定義滾動條(easyscroll)實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
element-ui實(shí)現(xiàn)表格邊框的動態(tài)切換并防抖
這篇文章主要介紹了element-ui實(shí)現(xiàn)表格邊框的動態(tài)切換并防抖方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue中安裝element-ui失敗問題原因及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
nginx配置域名后的二級目錄訪問不同項(xiàng)目的配置操作
這篇文章主要介紹了nginx配置域名后的二級目錄訪問不同項(xiàng)目的配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-cli3.0修改打包后的文件名和文件地址,打包后本地運(yùn)行報(bào)錯解決
這篇文章主要介紹了vue-cli3.0修改打包后的文件名和文件地址,打包后本地運(yùn)行報(bào)錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vue實(shí)現(xiàn)一個電子簽名組件的示例代碼
這篇文章主要介紹了使用vue實(shí)現(xiàn)一個電子簽名組件的示例代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了webstorm vue開發(fā)配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
下面小編就為大家分享一篇iview中Select 選擇器多選校驗(yàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
element表單使用校驗(yàn)之校驗(yàn)失效問題詳解
最近工作中遇到了element表單校驗(yàn)失敗的情況,通過查找相關(guān)資料終于解決了,所以下面這篇文章主要給大家介紹了關(guān)于element表單使用校驗(yàn)之校驗(yàn)失效問題的相關(guān)資料,需要的朋友可以參考下2022-10-10
詳解vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06