承接上文,我们已经可以构建和打包桌面应用了,至此基础工作已经完成,下面让我们愉快的开始仿造一个桌面端的微信吧?
1.认识目录结构
├── dist_electron // electron配置文件,不懂勿动哈一般不需要配置这里的文件
├── public // iindex.html公共目录
├── src // 源码目录
│ ├── assets // 公共资源目录
│ ├── components // 组件
│ ├── router // 路由
│ │ │ └── index.js // 路由配置文件
│ ├── store // vuex
│ │ │ └── index.js // vuex配置文件
│ ├── views // 视图配置文件
│ │ │ ├── msg //最近联系人
│ │ │ │ └── list.vue // 最近联系人文件
│ │ │ └── Index.vue // 整个登录成功后的主文件
│ │ │ └── Load.vue // 登录入口主文件
│ │ └── App.vue // vue入口文件
│ │ └── background.js // 主进程
│ │ └── main.js // 入口文件
├── package.json // 配置文件
├── vue.config.js // vue配置文件
├── babel.config.js // 不懂勿动哈
2.关于主进程和渲染进程
本项目中background.js既为主进程,所有的.vue页面全称为渲染进程
3.在vue中引入electron
4.主进程介绍
//初始化应用
app.on('ready', async () => {
createWindow()
})
在初始化应用后,执行createWindow(),大部分的关于应用的操作,均应该放在createWindow方法中
// 退出应用时触发
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
5.更多关于electron 的API介绍,请查阅我的另外一篇文章:
vue-electron: juejin.cn/post/684490…
