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