今天跟同學聊起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

引入以下模組

importAppfrom'./App' importrouterfrom'./router' importstorefrom'./store' Vue.prototype.$drobotUtils=drobotUtils //掛載到vue原型上，全域性使用 newVue({ 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>