Vue:NW를 사용하여 데스크톱 응용 프로그램을 구성합니다.js

이전에, 나는 Vue 프레임워크를 사용하여 데스크톱 프로그램을 구축하는 것에 관한 두 편의 글을 썼다. 하나는 사용하고, 다른 하나는 사용한다.나는 NW.js에 관한 글을 써 달라는 평론을 받았는데, 나는 한 편을 쓰기로 약속했다.우리 시작했어!늦게 하는 것이 안 하는 것보다 낫다😅

NW.js (previosly known as node-webkit) is a framework for building desktop applications with HTML, CSS, and JavaScript. It's based on Chromium and Node.js. NW.js lets you call Node.js code and modules directly from browser and also use Web technologies in your app. Further, you can easily package a web application to a native application.

⚛️ 전자와의 차이

전자 및 NWjs는 많은 공통된 특성을 가지고 있다. 이것들은 모두Chromium과 Node 위에 세워져 있다.HTML, CSS 및 js를 사용하여 데스크톱 응용 프로그램을 구성합니다.그러나 그것들도 몇 가지 현저한 차이가 있다.
북서쪽

.js 응용 프로그램의 주요 입구점은 웹 페이지나 js 스크립트입니다.이 항목은 package.json main 속성을 통해 지정할 수 있습니다.Electron에서 엔트리 포인트는 JavaScript 스크립트입니다.URL을 직접 제공하는 것과 달리 브라우저 창을 수동으로 만들고 API를 사용하여 HTML 파일을 로드할 수 있습니다.

건조 과정 NW.js 모든 크롬 만들기;Electron은 libchromiumcontent을 사용하여 Chromium의 컨텐츠 API

에 액세스
서북

.js는 원본 코드를 보호된 바이너리 파일로 컴파일하는 데 사용되는 built-in support을 제공합니다.Electron은 프로그램이 보호되지 않은 원본 코드를 포함하는 asar으로 프로그램을 포장하고 있습니다.

💻 저희가 뭘 만들까요?

이제 Electron의 차이점을 이해한 후에 이전 글과 같은 프로그램을 구축할 것입니다. OpenWeatherMap API을 기반으로 사용자가 선택한 도시의 날씨를 검사하는 프로그램입니다.이 프로젝트는 Vue CLI으로 구축될 것입니다. 저는 이런 방식으로 모든 Vue 응용 프로그램을 구축하는 것을 권장합니다.
마지막 NW만 보고 싶으면js 응용 프로그램 코드는 here입니다.

🛠️ 장치

Vue CLI를 사용하여 애플리케이션 생성

먼저 Vue CLI 를 사용하여 애플리케이션을 구축합니다.콘솔에서 다음 명령을 입력하여 설치했는지 확인하십시오.

vue --version

만약 판본이 하나도 없거나 세 개 이하라면빨리 뛰세요

npm install -g @vue/cli

이제 콘솔에서 Vue 프로젝트를 만들 수 있습니다!이렇게 하려면 빨리 뛰어라

vue create <<YOUR-PROJECT-NAME>>

그리고 당신이 필요로 하는 옵션을 선택하세요.이 항목의 기본 설정을 사용할 것입니다.
다행이다. 이제 우리는 데스크톱 마술을 추가할 준비를 하고 있다.🧙

NW를 추가합니다.js

NW.js official documentation에서는 다음 두 가지 빌더 중 하나로 어플리케이션을 패키지화하는 것이 좋습니다.

nwjs-builder-phoenix

nw-builder

nwjs builder phoenix를 선택했습니다. 만약 당신도 그것을 사용할 것이라고 가정한다면, 저는 진일보한 절차를 설명할 것입니다😅
따라서 먼저 프로젝트에 종속성으로 추가해야 합니다.

npm install --save-dev nwjs-builder-phoenix
## OR
yarn add --dev nwjs-builder-phoenix

현재, 당신은 package.json 파일을 수정하여, 포장기에 정확한 항목을 제공해야 합니다.

Tip: you can find package.json in the root folder of your application.

포장상 항목은 main 속성에서 지정해야 한다.데스크탑에서 개발 환경을 실행하므로 package.json을 다음과 같이 확장할 수 있습니다.

"main": "http://localhost:8080"

이것은 우리가 구축한 웹 응용 프로그램이 로컬에서 실행되는 포트입니다.일반적으로 main은 index.html이지만 애플리케이션이 변경될 때마다 핫 리로드를 수행하고자 합니다.이것이 바로 main이 핫 리로드 모듈이 있는 Vue 애플리케이션을 가리키는 이유입니다.

어플리케이션 실행

이제 웹 응용 프로그램을 실행합니다.

npm run serve
## OR
yarn serve

브라우저에서 http://localhost:8080을 검사하여 응용 프로그램이 실제로 실행되고 있는지 확인할 수 있습니다.이렇게 해야 합니다.

마지막으로 데스크탑 애플리케이션을 시작하려고 합니다.

./node_modules/.bin/run .

This will fetch a specified version of NW.js (by default it's sdk) and run a development environment.

run is a command added by nwjs-builder-phoenix and dot means we're usind the package.json from the root directory.

현재 데스크톱에서 프로그램을 실행해야 합니다

dev 환경의 운행을 약간 자동화합시다.데스크톱 응용 프로그램을 닫고 NW를 설치합니다.js SDK 스타일:

npm install --save-dev nw@sdk
## OR
yarn add --dev nw@sdk

새로운 작업을 package.json scripts 섹션에 추가합니다.

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "nw-serve": "nw ." /* <--- here is your new npm task */
},

이를 실행해 보겠습니다.

npm run nw-serve
## OR
yarn nw-serve

프로그램이 다시 데스크톱에서 실행되도록 해야 하는데, 다운로드 절차가 없습니다🎉
좋은 소식: 브라우저에서처럼 devtools를 간단하게 열고 프로그램을 디버깅할 수 있습니다.Window->Devtools을 클릭하면 됩니다.

🕹️ 애플리케이션 구축

전자, NW와 유사하다.js 드라이버는 일반적인 웹 응용 프로그램처럼 구축되기 때문에, Google은 웹 응용 프로그램을 만들고, 일부 CSS로 스타일을 디자인하며, nwjs-builder-phoenix으로 하여금 데스크톱 응용 프로그램에 어떻게 포장하는지 주목하게 할 것입니다.

NOTE: Same as for Electron app, I didn't install any CSS framework or component library on purpose: I wanted to compare package size without adding any different dependencies. The only library used for all desktop projects is axios.

App.vue 파일을 열고 내용을 다음 코드로 바꿉니다.

<template>
  <div id="app">
    <p>Enter the city name to check current weather in it</p>
    <section class="weather-input">
      <input type="text" v-model="query">
      <button :disabled="!query.length">Check</button>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: "",
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.button {
  color: #000;
}
</style>

현재 우리의 응용 프로그램은 이렇게 보인다.

🔗 API 호출

제가 쓰는 것은 OpenWeatherMap current weather API입니다.JSON 응답 here의 예를 볼 수 있는 다양한 정보를 제공합니다.
API 호출에는 axios이 사용됩니다.분명히 우리는 그것을 설치해야 한다.

npm install axios
## OR
yarn add axios

모든 Vue 구성 요소에서 axios를 사용할 수 있도록 main.js을 가져오고 기본 URL을 설정한 다음 Vue prototype에서 속성을 생성합니다.

//main.js

import axios from 'axios'

axios.defaults.baseURL = 'http://api.openweathermap.org/data/2.5';
Vue.http = Vue.prototype.$http = axios;

현재 App.vue에서 우리는 서로 다른 날씨 데이터를 표시하기 위해 데이터 속성을 만들 것이다.

// App.vue

data() {
    return {
      query: '',
      error: false,
      city: '',
      country: '',
      weatherDescription: '',
      temp: null,
      tempMin: null,
      tempMax: null,
      humidity: null,
      icon: '',
    };
},

Electron과 유사하며, Vuido 버전에 비해 icon의 추가 속성을 추가했습니다.API는 날씨 아이콘을 제공하지만 현재 이미지 표시가 지원되지 않으므로 Vuido 애플리케이션에서 사용할 수 없습니다.
데이터를 가져올 수 있는 방법도 만들었습니다.

methods: {
  showWeather() {
    this.$http
      .get(`/weather?q=${this.query}&units=metric&&appid=${API_KEY}`)
      .then(response => {
        this.city = response.data.name;
        this.country = response.data.sys.country;
        this.weatherDescription = response.data.weather[0].description;
        this.temp = response.data.main.temp;
        this.tempMin = response.data.main.temp_min;
        this.tempMax = response.data.main.temp_max;
        this.humidity = response.data.main.humidity;
        this.icon = `http://openweathermap.org/img/w/${
          response.data.weather[0].icon
        }.png`;
        this.error = false;
      })
      .catch(() => {
        this.error = true;
        this.city = '';
      });
  },
},

Don't forget to create a const API_KEY with your OpenWeather API key!

버튼을 클릭한 후 콜백에 추가합니다.

<button :disabled="!query.length" @click="showWeather">Check</button>

입력 필드에 텍스트를 입력하고 버튼을 클릭하면 API 호출을 Network 탭에서 확인할 수 있습니다.

💅 날씨 데이터 보이기

이 데이터를 템플릿에 추가합니다.

<template>
  <main id="app">
    <p>Enter the city name to check current weather in it</p>
    <section class="weather-input">
      <input type="text" v-model="query">
      <button :disabled="!query.length" @click="showWeather">Check</button>
    </section>
    <section v-if="error" class="weather-error">
      There is no such city in the database
    </section>
    <section v-if="city.length" class="weather-result">
      <h1>{{city}}, {{country}}</h1>
      <p><em>{{weatherDescription}}</em></p>
      <div class="weather-result__main">
        <img :src="icon" alt="Weather icon">
        <div class="weather-result__temp">
          {{temp}}&deg;C
        </div>
      </div>
      <div class="weather-result__details">
        <p>Min: {{tempMin}}&deg;C</p>
        <p>Max: {{tempMax}}&deg;C</p>
        <p>Humidity: {{humidity}}%</p>
      </div>
    </section>
  </main>
</template>

애플리케이션 보기:

그것은 보기에 너무 기본적이어서 CSS를 추가할 때가 되었다.style의 전체 App.vue 섹션을 다음 코드로 바꿉니다.

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
}

#app {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding: 10px;
  background: rgb(212, 228, 239);
  background: radial-gradient(
    ellipse at center,
    rgba(212, 228, 239, 1) 0%,
    rgba(134, 174, 204, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.weather-input {
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.weather-result {
  text-align: center;
}

.weather-result__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5px;
  font-size: 1.3rem;
  font-weight: bold;
}

.weather-result__details {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: dimgray;
}

.weather-error {
  color: red;
  font-weight: bold;
}

input {
  width: 75%;
  outline: none;
  height: 20px;
  font-size: 0.8rem;
}

button {
  display: block;
  width: 25%;
  height: 25px;
  outline: none;
  border-radius: 5px;
  white-space: nowrap;
  margin: 0 10px;
  font-size: 0.8rem;
}
</style>

마지막으로 다음과 같은 기능을 갖춘 애플리케이션이 있습니다.

포장하기 전에 마지막 일은 창문의 사이즈를 줄이는 것이다.이를 위해서는 window의 속성을 package.json에 추가해야 합니다.

"window": {
  "width": 600,
  "height": 400
},

📦 포장하다

NW 하나 포장해.js 응용 프로그램과 nwjs-builder-phoenix에서 적당한 매개 변수 집합을 가진 구축 명령을 실행해야 합니다.Mac에서 Electron과 Vuido 응용 프로그램과 크기를 비교하기 위해 구축할 것입니다.
우선 NW를 지정해야 합니다.구축 과정에서 사용할 js 버전입니다.우리는 build의 package.json 속성을 통해 실현할 수 있다

"build": {
  "nwVersion": "0.35.3"
},

그리고 터미널에서build 명령을 실행합니다.

./node_modules/.bin/build --tasks mac-x64 .

Again, dot in the command means we're using a package.json file located in the root project folder

소포의 크기를 검사합시다...233MB😱!

와, 너무 많다.그것은 심지어 전자 응용보다 더 크다!

🌟 결론

찬성 의견:

정말 쉽게 시작합니다.

은 CSS 스타일

을 통해 맞춤형 구성 가능

양호한 파일

보호 바이너리

지원
기만하다

초대형 포장 사이즈

의 좋지 않은 이름(나일 수도 있지만, Electron/Vuido는 NW.js보다 더 기억에 남는다)

소형 생태계.

💖 대단히 감사합니다

나는 나의 질문에 대답하도록 도와준 사람에게 감사하고 싶다.질문Jared는 NW.js Vue devtools의 저자로 데스크톱의 Vue 응용 프로그램을 디버깅합니다.
업데이트: 패키지의 크기를 현저하게 줄이는 방법을 알고 싶다면, Jared Wilcurt 저서.