從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()
  }
})
複製代碼