怎么快速搭建electron+vue项目

简单的记录快速搭建electron+vue项目的过程，快速搭建electron+vue框架步骤

当我们想要快速搭建一个 electron+vue 项目时，以下是可以采取的步骤：

1. 创建项目文件夹并初始化：在终端中进入到要创建项目的文件夹中，使用命令 `npm init` 来初始化项目。接着在命令行中输入 `npm install --save-dev electron` 来安装 electron 依赖。

2. 安装 Vue：使用命令 `npm install vue` 来安装 Vue。

3. 安装 Vue CLI：使用命令 `npm install -g vue-cli` 来全局安装 Vue CLI。

4. 创建 Vue 项目：使用命令 `vue init webpack` 来创建一个基于 webpack 的 Vue 项目，这里可以根据自己的需要进行选择。

5. 安装 electron-vue：使用命令 `npm install --save-dev electron-vue` 来安装 electron-vue 依赖。

6. 修改 package.json：在 `scripts` 中添加以下内容：

```javascript

"start": "npm run dev",

"dev": "electron .",

"pack": "electron-builder --dir",

"dist": "electron-builder"

```

7. 配置 webpack：在 `webpack.renderer.config.js` 文件中添加以下内容：

```javascript

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {

// ...

resolve: {

alias: {

vue$: 'vue/dist/vue.esm.js'

}

},

module: {

rules: [

// ...

{

test: /.vue$/,

loader: 'vue-loader'

},

{

test: /.css$/,

use: [

'vue-style-loader',

'css-loader'

],

}

]

},

plugins: [

// ...

new VueLoaderPlugin()

]

}

```

8. 配置 electron：在 `main.js` 文件中添加以下内容：

```javascript

const { app, BrowserWindow } = require('electron')

let mainWindow

function createWindow () {

mainWindow = new BrowserWindow({

data-width: 800,

data-height: 600,

webPreferences: {

nodeIntegration: true,

webSecurity: false,

contextIsolation: false,

enableRemoteModule: true

}

})

mainWindow.loadURL(process.env.NODE_ENV === 'development'

? 'http://localhost:8080'

: `file://${__dirname}/index.html`

)

mainWindow.on('closed', () => {

mainWindow = null

})

}

app.on('ready', createWindow)

app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {

app.quit()

}

})

app.on('activate', () => {

if (mainWindow === null) {

createWindow()

}

})

```

9. 运行项目：使用命令 `npm run start` 来运行项目。

10. 打包项目：使用命令 `npm run pack` 来打包项目，打包好的文件会存放在项目的 `dist` 文件夹中。

以上就是一个基于 electron+vue 的项目的快速搭建步骤。