为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Node.js Vue.js

# 基于 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 终于跑起来,可能有的人更快,可能有的人一天也搞不定,可能有的人电脑的环境啥都装有了,但是

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



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消