从0到1使用vue+electron构建本身的桌面端微信(二)

时间 2019-11-21

标签使用 vue+electron vue electron 构建本身桌面微信繁體版

原文原文链接

承接上文,咱们已经能够构建和打包桌面应用了,至此基础工做已经完成,下面让咱们愉快的开始仿造一个桌面端的微信吧?html

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页面全称为渲染进程vue

3.在vue中引入electron

我习惯在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.im/post/5dbbfb…git

从0到1使用vue+electron构建本身的桌面端微信(一)

juejin.im/post/5dcdf3…github

vue-electron(API)

juejin.im/post/5dbbfb…vuex

gitHub项目

github.com/cgq001/vue-…json