vue專案中 electron基本使用

electron是乙個可以使用前端技術開發乙個跨平台桌面應用的框架，簡言之就是 乙個框架 使用它可以生成桌面應用

一系列選擇後生成專案

npm run build

此時會生成dist目錄

打包前需要將資源檔案路徑改為相對路徑 此處使用腳手架2 所以在config/build/index.js build{} 中更改assetspublicpath: 「./」

let win;

let windowconfig = ;//視窗配置程式執行視窗的大小

function createwindow()/index.html`);//在視窗內要展示的內容index.html 就是打包生成的index.html

win.webcontents.opendevtools(); //開啟除錯工具

win.on('close',() => );

win.on('resize',() => )

}});

if(win == null)

});

以上是最基本的**，更複雜的可以自行設計，也可以看官方文件

package.json

,

"build": ,
"win": ]
},"artifactname": "demo-$-$.$",
"nsis": -$.$"
},"extraresources": ,
"publish": 
},"dependencies": ,
"devdependencied": 
}

此時如果正常顯示 表示成功 接下來只需要將其生成軟體包

sudo npm install electron-builder -g

sudo npm install electron-package -g

electron-builder

此時生成exe包

基於Vue的Electron專案搭建

demo 專案名稱 electron vue webpack配置檔案 build.js 生產環境構建 dev client.js 熱載入相關 dev runner.js 開發環境啟動入口 webpack.main.config.js 主程序配置檔案 webpack.renderer.config.j...

vue 專案中的scoped

加了scoped的樣式，在打包後，就會給同乙個帶有scoped的style裡面的樣式增加一段特殊標識，看下面例子就曉得了 打包後在.css檔案中就成了如下 one h1 xx h2 xx h4 xx 這裡的 xx在同乙個scoped裡面的都一樣，不同的不一樣 這就是為什麼引入其他元件時，在帶有sco...

vue專案中引入iconfont

對於前端而言，圖示的發展可謂日新月異。從img標籤，到雪碧圖，再到字型圖示，svg，甚至svg也有了類似於雪碧圖的方案svg sprite loader。雪碧圖沒有什麼好講的了，只是簡單地利用了background position來做圖示定位。今天咱們先聊聊怎麼使用字型圖示和svg圖示。其實字型圖...