vue-electron项目的创建

创建vue3项目

打开指定的文件目录，打开命令行窗口，输入

vue create vue-electron-demo

在vue项目中集成electron

进入刚才生成的项目目录，打开命令行窗口，输入

vue add electron-builder

如此，便初步搭建起来了一个vue中集成electron的项目

项目运行

打开package.json，我们可以看到

如果我们输入npm run serve，那么默认在浏览器中打开普通的vue项目，而若想打开客户端的electron项目，我们要输入npm run electron:serve
另外这种创建项目的方式，还给我们提供了项目打包的简便方法，直接在命令行窗口中输入npm run electron:build 即可
如果运行npm run electron:serve出现 vue devtools安装失败的问题（国内网络的原因），我们取消它就行了，打开background.js文件，即electron的主进程文件
按照下面的把代码注释掉即可

app.on('ready', async () => {
  // if (isDevelopment && !process.env.IS_TEST) {
  //   // Install Vue Devtools
  //   try {
  //     await installExtension(VUEJS3_DEVTOOLS)
  //   } catch (e) {
  //     console.error('Vue Devtools failed to install:', e.toString())
  //   }
  // }
  createWindow()
})

项目目录

配置vue.config.js

只有配置完vue.config.js，我们才可以直接在渲染进程中使用node模块和electron模块

module.exports = {
	pluginOptions: {
		electronBuilder: {
			nodeIntegration: true, 
			builderOptions: {
			}
		}
	}
}

引入vue-router依赖

在命令行输入

npm install vue-router@next --save

引入vuex依赖

在命令行输入

npm install vuex@next --save

引入ant-design

npm install ant-design-vue --save

另外在vue的入口文件main.js中加入配置

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(Antd).mount('#app')