전자 대체품: vue nodegui 발표🚀💚
왜 전자가 아니에요?
vue nodegui에 깊이 들어가기 전에 가장 유행하는 대체 방안인 전자⚛️
Electron은 한동안 JS를 사용하여 데스크톱 프로그램을 만드는 데 가장 인기 있는 라이브러리였다.놀라운 솔루션이지만 설계에 심각한 문제점이 있습니다.
vue nodegui란 무엇입니까?💚
vue nodegui는 nodegui의 사용자 정의 vue3 렌더링기로서 Qt5의 원본 JS 귀속 라이브러리입니다.다음은 작년 nodegui 공고의 발췌문입니다.
"NodeGUI is powered by Qt5 💚 which makes it CPU and memory efficient as compared to other chromium based solutions like electron. NodeGui wants to incorporate everything that is good about Electron: The ease of development, freedom of styling, Native APIs, great documentation, etc. At the same time NodeGui aims to be memory and CPU efficient."
vue nodegui는 개발자가 익숙한 vue API를 사용하여 자신의 데스크톱 프로그램인 react native를 만들도록 합니다.vue nodegui는 최종적으로Qt5에서 지원하기 때문에, 이것은 vue nodegui가 브라우저 환경에서 렌더링할 필요가 없다는 것을 의미합니다.반대로 응용 프로그램의 작은 위젯은 진정한 원본 위젯입니다.
특징.💎
setup, composition api 등요구 사항📝
다음은 vue nodegui 응용 프로그램을 만드는 시스템에 대한 일반적인 요구 사항입니다.
한번 해봅시다.🤩
먼저 starter repo를 복제합니다.
git clone https://github.com/nodegui/vue-nodegui-starter hello-world
cd hello-world
npm install
npm run dev
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 터미널에서 프로그램을 시작한 후 출력은 아래 화면 캡처와 같습니다
보시다시피, 저희는 아주 익숙한 Vue API를 사용하여 기본 카운터 프로그램을 만들었습니다.🚀🤘🏽
단, 새로운 태그를 발견할 수 있습니다.
<vn-view>, <vn-button>, <vn-text> 이것들은 vue nodegui에서 본 기기의 태그라고 부르는 내용입니다.vue nodegui 프로그램을 만들려면 이 프로그램을 사용해야 합니다.작은 위젯의 전체 디렉터리를 볼 수 있습니다 here기부금 및 지원☃️
만약 네가 읽은 적이 있다면, 비록 이것은 훌륭한 프로젝트이지만, 그것은 여전히 초급 단계에 있다는 것을 깨닫게 될 것이다.생산 프로그램에서 사용할 수 있기 전에 작은 위젯을 만들고 생태계를 둘러싼 작업을 더 많이 해야 한다.여기가 너희들이 들어온 곳이야!🚪
우리는 vue-nodegui repo 형식으로 vue nodegui에 코드, 문서, 자매 라이브러리 (애니메이션, 테스트, 구성 요소) 를 제공하는 것을 진심으로 환영합니다.우리는 또한 pull-requests를 선택하여 이러한 공헌을 격려했다!🥳
만약 이 프로젝트를 좋아하신다면, 환매 협의#Hacktoberfect를 통해 당신의 지지를 표시하십시오
만약 당신이 경제적으로 지원할 수 있다면 언제든지 starring ⭐️⭐️이 프로젝트를
웅장한 건물을 함께 만들 수 있어서 매우 기쁩니다!♥️
건배☕️
Reference
이 문제에 관하여(전자 대체품: vue nodegui 발표🚀💚), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/shubhamzanwar/electron-alternative-announcing-vue-nodegui-2l3e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
