阅读 1193

(一) 如何用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窗口

博客地址: alibt.top

更多精彩,请关注我的公众号!

文章分类
前端
文章标签