构建微信快捷发布文章工具

最近在使用微信公众号写文章但是每天打开网页太麻烦,而且上传图片文章也麻烦.于是打算自己写个桌面程序.主要使用vue和electron,使用vite构建工具. 长期更新

工具的选择

这个视频用了vite构建,比较新.之前我还在用webpack以及vue2. Vite与vue3比较搭.

vite

1	npm create vite@latest

值得注意的是Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本.当然我这里windows环境下主要利用nvm切换版本到新的.

注意:你可能使用低版本node创建一开始没报错,但后面会出问题.同时使用nvm注意版本问题,我这里使用了旧版本nvm报错unexpected token ‘.’.需要升级nvmnvm：npm ERR! Unexpected token ‘.‘_爱天蝎的双鱼的博客-CSDN博客

主要利用Vite构建

electron

简介 | Electron (electronjs.org)

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验

同时注意须要electron-builder打包

vue3

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

vite构建时即可选择使用vue.现在已经默认3.x

Element plus

一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

基于 Vue 3，面向设计师和开发者的组件库

其他UI Bootstrap5

也可以使用Bootstrap

npm导入后需要引入

1 2	import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js'

Bootstrap v5 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 前端工具库。 | Bootstrap 中文网 (bootcss.com)

1	npm i bootstrap@5.3.0-alpha1

打包工具

Inno Setup (jrsoftware.org)

用于把生成的exe打包发布,这样就不是光溜溜的一个exe了.

Inno Setup使用总结 - 知乎 (zhihu.com)

热重载

Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载 · Issue #53 · Kuari/Blog (github.com)

为了使vite和electron正常运行，需要先运行vite，使得其开发服务器的url可以正常访问，然后再开启electron去加载url。

此处需要安装两个库：

concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程
wait-on：等待资源，此处用来等待url可访问

接着更新文件package.json，scripts新增两条命令：

"scripts": {
  "electron": "wait-on tcp:5173 && electron .",
  "start": "concurrently -k \"yarn dev\" \"yarn electron\""
},

start命令就是为了运行vue项目然后等其打开后运行electron.在开发时electron需要加载这个url.

在目录下创建main.js 加载5173端口这个端口就是vite打开的

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  // win.loadFile('index.html')
  win.loadURL('http://localhost:5173')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

最后运行npm run start

参考资料

Vite+Vue+Electron环境搭建_⑥②的博客-CSDN博客_electron vite vue