工程师阿杜
工程师阿杜

electron-vue架构解析4-页面元素渲染过程分析（原）

上一节介绍了开发环境的创建过程，这一节我们来看具体页面渲染的过程。
由于页面渲染都是在渲染进程完成的，我们就从渲染进程的配置文件来看入口在哪里。
前面介绍过，渲染进程公用了两个配置文件，一个是electron-vue/dev-client.js，他负责在界面上提示当前的编译步骤，而另一个配置文件在webpack.renderer.config.js中定义：

let rendererConfig = {
    ...
    entry: {
        renderer: path.join(__dirname, '../src/renderer/main.js')
    },
    ...
}

也就是说，渲染进程的真正入口文件在src/renderer/main.js里面。
我们来看这个文件内容：

import Vue from 'vue'
import App from './App'
import router from './router'

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.config.productionTip = false

new Vue({
  components: { App },
  router,
  template: ''
}).$mount('#app')

这个文件内容很简单，就是创建一个Vue对象，并将App这个Vue组件挂载到页面的app元素挂载上去。
这里的App组件根据import语句看到，他就是当前目录下的App.vue文件，由于在webpack配置的extensions字段中说明了所有vue格式文件在引用时都无需添加后缀，因此这里的import只需要使用App即可。

那么这个App组件究竟挂载到哪里的html上呢？我们还要从webpack配置说起。
渲染进程的webpack中使用了一个html-webpack-plugin的插件，可以根据模板生成首页的html：

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: path.resolve(__dirname, '../src/index.ejs'),
    minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
    },
    nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
}),

这说明模板就是src/index.ejs文件：


<html>
  <head>
    <meta charset="utf-8">
    <title>electron-vue-frameworktitle>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      script>
    <% } %>
  head>
  <body>
    <div id="app">div>
    <script>
      if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    script>

  body>
html>

这个模板会被html-webpack-plugin插件生成为index.html文件，而这个模板中就包含了唯一的

元素： app。
也就是说，App这个Vue组件的挂载点就在生成的index.html文件上，并且是整个页面唯一的元素。
我们接下来看App这个组件的内容：