创建vue + electron 项目

1
vue init simulatedgreg/electron-vue my-project

创建窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    show: false,
    useContentSize: true
  })
  mainWindow.setMenu(null) // 清除默认菜单
  mainWindow.loadURL(winURL) // 项目主入口
  mainWindow.maximize()
  mainWindow.show()

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createWindow)

注意事项

  • dev时窗口显示文件资源(未生成页面)或者空白,按 ctrl + r 刷新窗口，该操作在任何条件下都适用

官方解释为：If error(s) are present in you src/renderer this creates conflicts with ESLint on first run. In turn, an INVALID webpack renderer.js is produced which interrupts HtmlWebpackPlugin from creating index.html. Since webpack-dev-server doesn’t have the index.html ready to serve, the server falls back to the file explorer.

即是ESLint规则检测到错误而引起的冲突，renderer.js会产生一个INVALID webpack ，它会中断HtmlWebpackPlugin生成index.html

  • 桌面版要改图标的话，记得图标的物理大小应该是256x256,不然会报错

node操作文件

  • 1、读
1
2
3
4
5
6
7
8
9
fs.readFile(path, 'utf-8', (err, data) => {
  // 读取文件失败/错误
  if (err) {
    throw err
  } else {
    // 读取文件成功
    this.content = data
  }
})
  • 2、写
1
2
3
4
5
fs.writeFile(this.fPath, event.value, {encoding: 'utf8'}, (err) => {
  if (err) {
    console.error(err)
  }
})

electron 保存文件窗口

1
2
3
4
5
6
7
8
9
10
11
  var filePath = dialog.showSaveDialog({
    filters: [
      {
        name: 'MD(Markdown)文件',
        extensions: ['md']
      }
    ],
    defaultPath: this.fPath,
    title: '另存为'
  })
// filePath 为用户选择的路径（包含文件名）

打包

1
2
3
4
5
// 桌面端
npm run build

// 网页版
npm run build:web