Electron如何加载vue页面的呢
第一步 createWindow()，创建窗口
在src/main/index.js中的createWindow()函数中，Electron-vue已经为我们写好了创建窗口的实例。在这里调用到了BrowserWindow，具体的参数设置以及使用参考官方文档。这里我们先引入BrowserWindow：
import { BrowserWindow } from 'electron'
然后看一下我们需要的参数，目前我们只需要设置窗口的宽高
// 定义一个mainWindow作为主窗口 mainWindow = new BrowserWindow({ height: 310,//窗口的高度 width: 330,//窗口的宽度 })
到这里，目前我们就可以创建一个页面了，那么Electron要如何来显示我们vue写好的页面，其实Electron-vue已经为我们做好了。
第二步 引入页面
// 定义了一个winUrl,存储要加载的页面 const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html`
在Electron-vue中index.html对应的是index.ejs ！！！
第三步 加载页面
// 用主窗口去加载页面 mainWindow.loadURL(winURL)
到此为止，我们已经了解了Electron是如何加载页面的
下面的内容，需要了解vue！！！
下面我们开始制作登录页面，
第一步 创建文件以及文件夹
在renderer中创建一个名为layout的文件夹，并在此文件夹中创建login.vue文件.
第二步 使用element-ui实现如下页面
可以看到这是一个form表单，需要引入el-form ,然后里面有用户名输入框，密码输入框，自启动radio，已经两个button。
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"label-width="80px"label-position="left"> <el-form-item label="用户名" prop="userName"> <el-input v-model="ruleForm.userName" placeholder="请输入用户名" style="width: 180px;"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="ruleForm.password" 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')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form>
确定form中的数据有：userName，password，autoStart，直接使用vue进行的v-model进行绑定。
分析：
- 我们需要定义的字段
data() { return { user: [], autoStartLocal:false, // 记录本地存储的自启动，如果本地已经将自启动写入注册表，这个数据和表单里的autoStart进行比较，防止多次写入。 ruleForm: { password: "", // 表单密码 userName: "",//表单 autoStart: false }, rules: { password: [{ required: true, message: "请输入密码", trigger: "blur" }], userName: [{ required: true, message: "请输入用户名", trigger: "blur" }] } }; },
- 什么时候读取本地存储的用户名，密码以及自启动
用户输入完用户名和密码，需要和本地所存储的用户名密码进行比较，所以我们需要将数据取出来，但是你会发现，自启动，我们有可能之前设置过了，所以自启动要在页面加载之后就开始读取，使用monted在DOM加载完成之后就进行读取。
submitForm(formName) { console.log("提交"); this.$refs[formName].validate(valid => { if (valid) { if ( this.ruleForm.userName !== this.user.userName || this.user.password !== this.ruleForm.password ) { this.$message({ message: "用户名或者密码错误", 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>
