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

最新推荐文章于 2024-05-27 16:43:55 发布

工程师阿杜

最新推荐文章于 2024-05-27 16:43:55 发布

阅读量3.2k

点赞数 1

分类专栏：源码前端文章标签： electron vue electron-vue

本文链接：https://blog.csdn.net/u010961631/article/details/80651478

版权

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

摘要由CSDN通过智能技术生成

上一节介绍了开发环境的创建过程，这一节我们来看具体页面渲染的过程。
由于页面渲染都是在渲染进程完成的，我们就从渲染进程的配置文件来看入口在哪里。
前面介绍过，渲染进程公用了两个配置文件，一个是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: '<App/>'
}).$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文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>electron-vue-framework</title>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')

最低0.47元/天解锁文章

工程师阿杜

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
electron-vue架构解析4-页面元素渲染过程分析（原）

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

扫一扫

专栏目录