在这篇博文中,我们将看看 vue-nodegui,一个新发布的 JS 库,用于使用 VueJS 创建跨平台的原生桌面应用程序💚
-
回购链接:https://github.com/nodegui/vue-nodegui
-
文档站点:https://vue.nodegui.org
为什么不是电子?
在我们深入了解 vue-nodegui 之前,让我们讨论一下最流行的替代方案:Electron ⚛️
一段时间以来,Electron 一直是最流行的使用 JS 创建桌面应用程序的库。虽然这是一个了不起的解决方案,但它在设计上有一些严重的痛点:
-
Electron 应用程序往往会变得臃肿,因为每个 Electron 应用程序都附带了一个运行它的 Chromium 浏览器版本。因此,它不是_真正_原生的。
-
Electron 应用程序还存在 CPU/内存利用率过高的问题。
什么是vue-nodegui? 💚
vue-nodegui 是nodegui的自定义 vue3 渲染器,Qt5的原生 JS 绑定库。以下是去年nodegui公告的摘录:
"NodeGUI 由 Qt5 提供支持 💚 与其他基于 chromium 的解决方案(如电子)相比,它的 CPU 和内存效率更高。NodeGui 希望整合 Electron 的所有优点:易于开发、样式自由、原生 API、出色的文档等。同时,NodeGui 旨在提高内存和 CPU 效率。"
vue-nodegui 允许开发人员使用熟悉的 Vue API 来创建他们的原生桌面应用程序——react-native 为 react 所做的事情。由于 vue-nodegui 最终由 Qt5 提供支持,这意味着 vue-nodegui 不需要浏览器环境来渲染。相反,应用程序中的小部件是真正原生的。
特点💎
setupcomposition api要求📝
以下是系统创建 vue-nodegui 应用程序的一般要求:
-
仅支持 64 位操作系统。
-
CMake 3.1 及更高版本(安装说明可在此处找到:https://cmake.org/install/)
-
制造商,GCC v7
-
NodeJS v12.x 及以上
您可以在入门页面上找到每个要求和故障排除指南的详细安装步骤。
来试试吧🤩
首先,让我们首先克隆 starter repo:
git clone https://github.com/nodegui/vue-nodegui-starter hello-world
cd hello-world
npm install
npm run dev
让我们创建一个带有计数器的基本 hello-world 项目
App.vue<template>
<vn-view :styleSheet="styles">
<vn-text id="header">Hello world</vn-text>
<vn-view id="row">
<vn-button @clicked="decrement">-</vn-button>
<vn-text id="count">{{count}}</vn-text>
<vn-button @clicked="increment">+</vn-button>
</vn-view>
</vn-view>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value += 1;
}
const decrement = () => {
count.value -= 1;
}
const styles = `
#header {
padding: 10px;
background: #36495e;
width: 200px;
color: #fff;
qproperty-alignment: AlignCenter;
}
#row {
width: '100%';
flex-direction: 'row';
justify-content: 'center';
}
#count {
padding: 5px;
qproperty-alignment: AlignCenter;
}
`
return {
count,
decrement,
increment,
styles
}
}
};
</script>
npm run dev[](https://res.cloudinary.com/practicaldev/image/fetch/s--bqvPzWn3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https:// /dev-to-uploads.s3.amazonaws.com/i/4riemaspm4br48wb4kst.gif)
如您所见,我们使用非常熟悉的 Vue API 创建了一个基本的计数器应用程序。 🚀🤘🏽
, , 贡献和支持☃️
如果您浏览了vue-nodegui repo,您会意识到即使它是一个很棒的项目,它仍处于起步阶段。在我们可以在生产应用程序中使用它之前,需要在创建小部件和围绕它的生态系统方面做更多的工作。这是你们都进来的地方! 🚪
我们全心全意地欢迎以pull-requests的形式为 vue-nodegui - 代码、文档、姐妹库(动画、测试、组件)提供任何形式的贡献。我们还选择了#Hacktoberfect来鼓励这些贡献! 🥳
如果您喜欢该项目,请通过主演 ⭐️⭐️repo 来表示您的支持
如果您能够在经济上支持,请随时赞助💵💵这个项目
超级兴奋能一起建造一些宏伟的东西! ♥️
干杯☕️