(一) 如何用Vue+Electron撸一个博客编辑客户端工具

# 基础框架搭建

# 基于@vue/cli初始化一个vue项目

# 安装最新版本的VueCLI3

需要Node.js 8或更高版本

npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 初始化项目

vue create Eblog

具体步骤可参考创建一个项目，这里选择手动选择功能，并选中Babel、Router、Vuex、Css processors(scss)、Linter。

初始化完成后，进入EBlog目录，执行yarn serve即可运行项目。
运行地址为http://127.0.0.1:8080/

# 项目配置

在根目录增加vue.config.js文件，添加baseUrl配置为""

vue.config.js

module.exports = {
  baseUrl: ""
};

此配置的目的为使vue中的所有资源都使用相对路径进行链接，以便electron加载文件时能正确读取文件。

# 项目打包

yarn build

此时会在根目录下生成打包后的dist目录文件

# 整合Electron

# 安装electron

yarn add electron -D

在根目录下创建electron目录，添加main.js文件：

const { app, BrowserWindow } = require("electron");
const path = require("path");
let mainWindow;
// 声明窗口加载的地址，如果是开发环境加载vue开发环境地址，
// 正式环境加载vue项目打包后静态文件路径
let winurl =
  process.env.NODE_ENV === "development"
    ? "http://localhost:8080"
    : path.join(__dirname, "../dist/index.html");
function createWindow() {
 // 创建一个主窗口
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });
  // 加载页面文件，或地址
  mainWindow.loadURL(winurl);

  // 打开开发者工具
  mainWindow.webContents.openDevTools();

  // 监听窗口关闭事件
  mainWindow.on("closed", function() {
    mainWindow = null;
  });
}

//app 加载完成后创建窗口
app.on("ready", createWindow);

// 监听所有窗口关闭事件.
app.on("window-all-closed", function() {
  if (process.platform !== "darwin") {
    app.quit();
  }
});
// 监听app激活事件
app.on("activate", function() {
  if (mainWindow === null) {
    createWindow();
  }
});

# 运行electron

在package.json文件中增加script命令：

 {
    "start": "electron electron/main"
 }

然后执行yarn start命令，即可打开app窗口