基于 Vuejs 的 vuido本机GUI桌面程序 十分钟 hello world

# 基于 Vuejs 的 vuido 十分钟 hello world

- 先介绍 vuido 相关技术

- 首先是 libui，[libui](https://github.com/andlabs/libui)是 C 语言实现的一个简单可移植的(但不是不灵活)GUI 库，其使用所支持的每个平台的本地 GUI 技术

- 然后 libui-node，[libui-node](https://github.com/parro-it/libui-node)是 libui 的 node 封装。

- 最后 vuido，[vuido](https://github.com/mimecorg/vuido) 使用 Vue.js 的本机桌面应用程序

- [安装文档](https://vuido.mimec.org/installation)

## 说明

- 本次演示说明仅限于 windows 操作系统

- 环境安装可能不会这么顺利，所以了解上面的知识可能有帮助

- vuido 依赖于 libui-node 库，libui-node 借助 nbind 将 c 连接到 node，安装 libui-node 的时候会有编译 c 代码的过程

- nbind 使用 node-gyp 库进行编译，node-gyp 是一个 C++模块编译工具，node-gyp 又用到了 python，并调用`Visual Studio Build Tools`编译代码

- 所以整个过程就是，先下载安装`windows-build-tools`和 c 依赖库，`libui-download`下载`libui`源码，执行`node-gyp configure build`开始编译，调用 python，然后是利用`Visual Studio Build Tools`编译 c 代码，链接到 node 得到`nbind.node`文件，由 vuido 调用

- 如果执行`node-gyp configure build`过程出错，尝试删除用户文件夹的`.node-gyp`文件夹，重新安装`npm uninstall --global node-gyp`,`npm install --global node-gyp`

- 避免权限不够，请用管理员权限打开命令行执行命令，相关文件下载在官网有

## 环境准备及运行

### 一、安装构建工具

- 执行`npm install --global --production windows-build-tools`，

- 这个会下载安装 Python 和 Visual Studio Build Tools，如果 Python 下载失败可以手动安装，如果已经安装了，但是命令行执行`python`命令无效，可手动添加 python 路径到系统路径，我的下载过程也曲折，网络不好，多试了几次才下载完成

- [python2.7.15](https://www.python.org/downloads/release/python-2715/)

- [Visual Studio Build Tools](https://www.microsoft.com/en-us/download/details.aspx?id=48159)

```bash

PS F:\Downloads\Src\Test\vuido\my-project> npm install --global --production windows-build-tools

> windows-build-tools@5.1.0 postinstall C:\Users\12504\AppData\Roaming\npm\node_modules\windows-build-tools

> node ./dist/index.js

Downloading vs_BuildTools.exe

[>                                            ] 0.0% (0 B/s)

Downloaded vs_BuildTools.exe. Saved to C:\Users\12504\.windows-build-tools\vs_BuildTools.exe.

Starting installation...

Launched installers, now waiting for them to finish.

This will likely take some time - please be patient!

Status from the installers:

---------- Visual Studio Build Tools ----------

Successfully installed Visual Studio Build Tools.

------------------- Python --------------------

Python 2.7.15 is already installed, not installing again.

Now configuring the Visual Studio Build Tools..

All done!

+ windows-build-tools@5.1.0

added 145 packages from 98 contributors in 18.688s

```

- 下载安装[Visual C++ Redistributable Package for Visual Studio 2013](https://www.microsoft.com/en-us/download/details.aspx?id=40784)，用于 Visual Studio Build Tools 编译 c 代码

### 二、安装 vue 脚手架（3.x），初始化项目

- 安装 vue cli 工具`npm install --global @vue/cli @vue/cli-init`

- 初始化项目`vue init mimecorg/vuido-webpack-template my-project`

### 三、构建运行

- `npm install`

```bash

PS F:\Downloads\Src\Test\vuido\my-project> npm install

> libui-node@0.2.1 install F:\Downloads\Src\Test\vuido\my-project\node_modules\vuido\node_modules\libui-node

> libui-download && autogypi && npm run build

Downloaded zip: C:\Users\12504\.libui\libui-shared-windows-x64-alpha3.5-master-008.tar.gz

Libui binaries extracted to: F:\Downloads\Src\Test\vuido\my-project\node_modules\vuido\node_modules\libui-node

> libui-node@0.2.1 build F:\Downloads\Src\Test\vuido\my-project\node_modules\vuido\node_modules\libui-node

> node-gyp configure build

F:\Downloads\Src\Test\vuido\my-project\node_modules\vuido\node_modules\libui-node>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" configure build )  else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" configure build )

Warning: Missing input files:

F:\Downloads\Src\Test\vuido\my-project\node_modules\vuido\node_modules\libui-node\build\Release\nbind.node

在此解决方案中一次生成一个项目。若要启用并行生成，请添加“/m”开关。

Copying ../../../nbind/src/symbols.txt to Release\obj\nbind\\symbols.txt

已复制         1 个文件。

common.cc

reflect.cc

Color.cc

EventLoop.cc

Point.cc

PointDouble.cc

Size.cc

SizeDouble.cc

timer-common.cc

Ui.cc

UiBox.cc

UiButton.cc

UiCheckbox.cc

UiColorButton.cc

UiCombobox.cc

UiControl.cc

UiDateTimePicker.cc

UiEditableCombobox.cc

UiEntry.cc

UiFontButton.cc

UiForm.cc

UiGrid.cc

UiGroup.cc

UiLabel.cc

UiMenu.cc

UiMultilineEntry.cc

UiProgressBar.cc

UiRadioButtons.cc

UiSeparator.cc

UiSlider.cc

UiSpinbox.cc

UiTab.cc

UiWindow.cc

AttributedString.cc

FontAttribute.cc

FontDescriptor.cc

OpenTypeFeatures.cc

BrushGradientStop.cc

DrawBrush.cc

DrawMatrix.cc

DrawStrokeParams.cc

DrawTextLayout.cc

UiArea.cc

UiAreaDrawParams.cc

UiAreaHandler.cc

UiAreaKeyEvent.cc

UiAreaMouseEvent.cc

UiDrawContext.cc

UiDrawPath.cc

libui_loop.cc

timer.cc

Buffer.cc

Binding.cc

win_delay_load_hook.cc

正在创建库 F:\Downloads\Src\Test\vuido\my-project\node_modules\vuido\node_modules\libui-node\build\Release\nbind.lib 和对象

F:\Downloads\Src\Test\vuido\my-project\node_modules\vuido\node_modules\libui-node\build\Release\nbind.exp

nbind.vcxproj -> F:\Downloads\Src\Test\vuido\my-project\node_modules\vuido\node_modules\libui-node\build\Release\\nbi

nd.node

Copying F:\Downloads\Src\Test\vuido\my-project\node_modules\vuido\node_modules\libui-node/build/Release/nbind.node to

F:\Downloads\Src\Test\vuido\my-project\node_modules\vuido\node_modules\libui-node\nbind.node

已复制         1 个文件。

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN vue-loader@15.6.1 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 85 packages from 89 contributors and audited 7559 packages in 83.378s

found 0 vulnerabilities

PS F:\Downloads\Src\Test\vuido\my-project> npm install start

npm WARN deprecated start@5.1.0: Deprecated in favor of https://github.com/deepsweet/start

npm WARN vue-loader@15.6.1 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ start@5.1.0

added 1 package from 1 contributor and audited 7560 packages in 8.628s

found 0 vulnerabilities

PS F:\Downloads\Src\Test\vuido\my-project> npm install

npm WARN vue-loader@15.6.1 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 7560 packages in 6.112s

found 0 vulnerabilities

```

- 构建`npm run build`，运行`npm start`，到这里一般没什么问题了

## 打包

- 打包工具[launchui-packager-gui](https://github.com/mimecorg/launchui-packager-gui)，这个工具是基于 Vuido，所以上面能跑，这个应该也可以，打包完之后就可以得到可执行的 exe 执行文件

## 总结

- 第一次总是不会那么顺利，根据错误提示做各种猜测，不断尝试去解决，经过几分钟的折腾 hello world 终于跑起来，可能有的人更快，可能有的人一天也搞不定，可能有的人电脑的环境啥都装有了，但是

- 只有了解整个过程，知根知底，才能对症下药，百发百中，整理之后有了更深的认识，希望能帮助到初学的同学