electron-vue 項目的運行流程

今天跟同學聊起vue的時候，發現自己有很多知識遺漏了 ，就看了一下electron-vue

的運行流程，有些淺顯的認識，希望大神能夠指點一二

控制台執行npm run dev 這一行腳本

在webpack.json中可以找到 "dev": "node .electron-vue/dev-runner.js" 這一行命令

程序會執行到dev-runner.js文件

 

引入electron、打包等模塊

const chalk = require('chalk')
const electron = require('electron')
const path = require('path')
const { say } = require('cfonts')
const { spawn } = require('child_process')
const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const webpackHotMiddleware = require('webpack-hot-middleware')

const mainConfig = require('./webpack.main.config')
const rendererConfig = require('./webpack.renderer.config')

Promise.all並行加載

startRenderer()執行渲染進程，

startMain()執行主線程

startElectron()啟動electron
在執行完 vue項目啟動之后 再啟動 electron

function init () {
  greeting()

  Promise.all([startRenderer(), startMain()])
    .then(() => {
      startElectron()
    })
    .catch(err => {
      console.error(err)
    })
}

init()

　　執行渲染進程

 __dirname 這個就是

../src/renderer/main.js 這個地址指向的是我們渲染線程的主入口

webpack打包器，打包之后運行

webpackHotMiddleware 這個是設置熱更新，什么是熱更新就是代碼改了之后自動刷新界面，在開發環境比較好用
然后就是監聽本地服務器 9080 

function startRenderer () {
  return new Promise((resolve, reject) => {
    rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer) // 進入渲染進程

    const compiler = webpack(rendererConfig)
    hotMiddleware = webpackHotMiddleware(compiler, { 
      log: false, 
      heartbeat: 2500 
    })

    compiler.plugin('compilation', compilation => {
      compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => {
        hotMiddleware.publish({ action: 'reload' })
        cb()
      })
    })

    compiler.plugin('done', stats => {
      logStats('Renderer', stats)
    })

    const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        before (app, ctx) {
          app.use(hotMiddleware)
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

    server.listen(9080)
  })
}

　　執行主線程 主線程 指向 

../src/main/index.js

該文件主要是創建窗口，設置窗口事件

function startMain () {
  return new Promise((resolve, reject) => {
    mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)

    const compiler = webpack(mainConfig)

    compiler.plugin('watch-run', (compilation, done) => {
      logStats('Main', chalk.white.bold('compiling...'))
      hotMiddleware.publish({ action: 'compiling' })
      done()
    })

    compiler.watch({}, (err, stats) => {
      if (err) {
        console.log(err)
        return
      }

      logStats('Main', stats)

      if (electronProcess && electronProcess.kill) {
        manualRestart = true
        process.kill(electronProcess.pid)
        electronProcess = null
        startElectron()

        setTimeout(() => {
          manualRestart = false
        }, 5000)
      }

      resolve()
    })
  })
}

　　渲染線程 執行main.js 

引入以下模塊

import App from './App'

import router from './router'

import store from './store' 

 

Vue.prototype.$drobotUtils = drobotUtils //掛載到vue原型上，全局使用

new Vue({

  components: { App },

  router,

  store,

  template: '<App/>'

}).$mount('#app')

綁定塊元素

 

進入到APP

router-view 路由組件 ，配置路由即可進入到你創建的頁面了

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style lang="scss">
  @import './styles/index.scss'; // 全局自定義的css樣式
.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>