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>