![](\"https:\/\/i.yimenyun.net\/2023-03\/20\/15\/32603620668.jpg\")
<\/figure>\n<\/p>\nk-cli –save-dev<\/p>\n
“`<\/p>\n
2. \u521b\u5efa webpack \u914d\u7f6e\u6587\u4ef6<\/p>\n
\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u521b\u5efa `webpack.config.js` \u6587\u4ef6\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\uff1a<\/p>\n
“`javascript<\/p>\n
const path = require(‘path’);<\/p>\n
module.exports = {<\/p>\n
entry: ‘.\/src\/main.js’,<\/p>\n
output: {<\/p>\n
path: path.resolve(__dirname, ‘dist’),<\/p>\n
filename: ‘bundle.js’<\/p>\n
},<\/p>\n
module: {<\/p>\n
rules: [<\/p>\n
{<\/p>\n
test: \/\\.vue$\/,<\/p>\n
loader: ‘vue-loader’<\/p>\n
},<\/p>\n
{<\/p>\n
test: \/\\.js$\/,<\/p>\n
loader: ‘babel-loader’,<\/p>\n
exclude: \/node_modules\/<\/p>\n
}<\/p>\n
]<\/p>\n
},<\/p>\n
resolve: {<\/p>\n
alias: {<\/p>\n
‘vue$’: ‘vue\/dist\/vue.esm.js’<\/p>\n
},<\/p>\n
extensions: [‘*’, ‘.js’, ‘.vue’, ‘.json’]<\/p>\n
},<\/p>\n
devServer: {<\/p>\n
contentBase: ‘.\/dist’<\/p>\n
}<\/p>\n
};<\/p>\n
“`<\/p>\n
3. \u6253\u5305 Vue.js \u9879\u76ee<\/p>\n
\u5728\u7ec8\u7aef\u4e2d\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\uff0c\u5373\u53ef\u6253\u5305 Vue.js \u9879\u76ee\uff1a<\/p>\n
“`bash<\/p>\n
npm run build<\/p>\n
“`<\/p>\n
\u6253\u5305\u5b8c\u6210\u540e\uff0c`dist` \u76ee\u5f55\u4e0b\u4f1a\u751f\u6210 `bundle.js` \u6587\u4ef6\u3002<\/p>\n
## \u4f7f\u7528 Electron \u6253\u5305 Vue.js \u9879\u76ee<\/p>\n
\u5728\u6253\u5305 Vue.js \u9879\u76ee\u5b8c\u6210\u540e\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 Electron \u5c06\u5176\u6253\u5305\u6210\u53ef\u6267\u884c\u6587\u4ef6\u3002<\/p>\n
1. \u5b89\u88c5 Electron<\/p>\n
“`bash<\/p>\n
npm install electron –save-dev<\/p>\n
“`<\/p>\n
2. \u521b\u5efa Electron \u5165\u53e3\u6587\u4ef6<\/p>\n
\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u521b\u5efa `main.js` \u6587\u4ef6\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\uff1a<\/p>\n
“`javascript<\/p>\n
const { app, BrowserWindow } = require(‘electron’);<\/p>\n
const path = require(‘path’);<\/p>\n
function createWindow () {<\/p>\n
const win = new BrowserWindow({<\/p>\n
width: 800,<\/p>\n
height: 600,<\/p>\n
webPreferences: {<\/p>\n
nodeIntegration: true<\/p>\n
}<\/p>\n
});<\/p>\n
win.loadFile(path.join(__dirname, ‘index.html’));<\/p>\n
}<\/p>\n
app.whenReady().then(() => {<\/p>\n
createWindow();<\/p>\n
app.on(‘activate’, () => {<\/p>\n
if (BrowserWindow.getAllWindows().length === 0) {<\/p>\n
createWindow();<\/p>\n
}<\/p>\n