创建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')
