This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.

How does Electron load a VUE page

The first step createWindow() creates the window

In the createWindow() function in SRC /main/index.js, Electron-vue has already written an instance of creating a window for us. Here BrowserWindow is called. For details on how to set parameters and use them, refer to the official documentation. Here we introduce BrowserWindow:

import { BrowserWindow } from 'electron'
Copy the code

Then look at the parameters we need, so far we just need to set the width and height of the window

MainWindow = new BrowserWindow({height: 310,// width: 330,// width of the window})Copy the code

At this point, we are now ready to create a page, so how will Electron display our page written by Vue? In fact, Electron vue has already done it for us.

The second step is to introduce the page

Const winUrl = process.env.node_env === 'development'? `http://localhost:9080` : `file://${__dirname}/index.html`Copy the code
In the Electron-vue index.html corresponds to index.ejs!!

Step 3 Load the page

// use mainWindow to load the page mainwindow.loadurl (winURL)Copy the code

So far, we’ve seen how Electron loads the page, right

The following content, need to know vue!!

So let’s start with the login page,

The first step is to create files and folders

Create a folder called Layout in the Renderer and create the login.vue file in that folder.

The second step uses element-UI to implement the following page

You can see that this is a form form, you need to introduce the el-form, and then there is a user name input box, password input box, self-start radio, and two buttons.

<el-form :model="ruleForm" :rules="rules" ref="ruleForm"label-width="80px"label-position="left"> <el-form-item <el-input V-model ="ruleForm. UserName "placeholder=" placeholder" style="width: 180px; ></ el-form-item> <el-form-item label=" password" prop="password"> <el-input type="password" V-model =" ruleform. password" placeholder=" placeholder "style="width: 180px; ></el-input> </el-form-item> <el-form-item label=" prop="autoStart"> <el-switch v-model="ruleForm.autoStart"></el-switch> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')"> Submit </el-button> <el-button @click="resetForm('ruleForm')"> </el-form>Copy the code

Select userName, password, and autoStart from vue.

Analysis:

  1. We need to define the fields
Data () {return {user: [], autoStartLocal:false, // Records the autoStart of the local storage. If the local storage has written the autoStart to the registry, this data is compared with the autoStart in the form to prevent multiple writes. RuleForm: {password: "",// form password userName: "",// form autoStart: false}, rules: {password: [{required: true, message: "Please enter password ", trigger: "blur"}], userName: [{required: true, message:" please enter userName ", trigger: "blur"}]}}; },Copy the code
  1. When I read the local store the user name, password, and start from the user input the user name and password, and local storage is the user name password comparison, so we need the data, but you will find that since the launch, we may set before, so since the launch begins to read after the page is loaded, Use Monted to read the DOM after it has been loaded.
SubmitForm (formName) {console.log(" submit "); this.$refs[formName].validate(valid => { if (valid) { if ( this.ruleForm.userName ! == this.user.userName || this.user.password ! Password) {this.$message({message: "username or password error", type: "error", center: true, duration: 1000}); } else { let result = this.$db .get("user") .find({ userName: this.ruleForm.userName }) .assign({ autoStart: this.ruleForm.autoStart }) .write(); if (result) { this.$store.commit("changeLoginState", true); console.log(this.$store.state.login.loginState); this.$router.replace("/"); console.log(this.$router); } } } else { return false; }}); }, resetForm(formName) { this.$refs[formName].resetFields(); }}}; </script>Copy the code