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进行绑定。

分析：

1. 我们需要定义的字段

 data() {
    return {
      user: [],
      autoStartLocal:false, // 记录本地存储的自启动，如果本地已经将自启动写入注册表，这个数据和表单里的autoStart进行比较，防止多次写入。
      ruleForm: {
        password: "", // 表单密码
        userName: "",//表单
        autoStart: false
      },
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        userName: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      }
    };
  },

2. 什么时候读取本地存储的用户名，密码以及自启动
   用户输入完用户名和密码，需要和本地所存储的用户名密码进行比较，所以我们需要将数据取出来，但是你会发现，自启动，我们有可能之前设置过了，所以自启动要在页面加载之后就开始读取，使用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>