PicMagic 是基于 Electron 和 Vue.js 构建的桌面应用，配合 Element UI，可以支持 Windows、MacOS 和 Linux 系统，初步设计的功能有：修改壁纸、图片压缩、图片转 webp、PSD 切图等常见的图片操作，下面简单介绍一下这个项目。

首先，使用 electron-vue 初始化项目，初始化之后目录结构如下

PicMagic

├─ .electron-vue

│  └─ <build/development>.js files

├─ build

│  └─ icons/

├─ dist

│  ├─ electron/

│  └─ web/

├─ node_modules/

├─ src

│  ├─ main

│  │  ├─ index.dev.js

│  │  └─ index.js

│  ├─ renderer

│  │  ├─ components/

│  │  ├─ router/

│  │  ├─ store/

│  │  ├─ App.vue

│  │  └─ main.js

│  └─ index.ejs

├─ static/

├─ test

│  ├─ e2e

│  │  ├─ specs/

│  │  ├─ index.js

│  │  └─ utils.js

│  ├─ unit

│  │  ├─ specs/

│  │  ├─ index.js

│  │  └─ karma.config.js

│  └─ .eslintrc

├─ .babelrc

├─ .eslintignore

├─ .eslintrc.js

├─ .gitignore

├─ package.json

└─ README.md

设置壁纸主要使用了 wallpaper，图片来自 Unsplash，使用时需要注册开发者账号，初始化时把 applicationId 和 secret 修改为自己的账号

const unsplash =new Unsplash({
  applicationId:'',
  secret:'',
  callbackUrl:'http://unsplash-js.herokuapp.com'
})

在 created 这个生命周期里面加载图片

loadImage () {
      unsplash.photos
        .getRandomPhoto({ width: 1920, height: 1080, count: 20 })
        .then(toJson)
        .then(json => {
          this.items = json
          //  console.log(this.items)
        })
    }

设置壁纸时先把图片存到本地，然后再利用 wallpaper 设置桌面壁纸

setBackground (item) {
      this.loading = true
      let self = this
      const request = require('request')
      let picturePath = path.join(os.homedir(), '/Pictures', 'background.jpg')
      picturePath = path.normalize(picturePath)
      request(item.urls.custom, function () {
        wallpaper.set(picturePath, { scale: 'stretch' }).then(() => {
          self.loading = false
          self.$electron.ipcRenderer.send('setWallpaperSuccessful')
        })
      }).pipe(fs.createWriteStream(picturePath))
    }

这样大致上就把修改壁纸的功能实现了，详细细节可以参考：PicMagic