웹 응용 프로그램 개발자로서 나는 여러 차례 데스크톱 환경에 대해 호기심을 느꼈다.나의 일상적인 업무는 완전히 MacOS의 데스크톱 프로그램에 의존한다.고품질의 데스크톱 앱을 신속하게 만들 수 있다면 다행이다.
불행하게도, 적어도 내 경험으로 볼 때, 내가 데스크톱 응용 개발 중인 기술을 이해하려고 할 때마다, 나는 낙담한다.자바와 C# 같은 믿을 만한 기술들이 있는데, 아주 좋은 설정을 제공했지만, 행운을 빌고, 사용자에게 매력적인 것을 만들어 주었다.MacOS는 Cocoa/Objective C와 Swift를 제공합니다. 이것은 아주 좋습니다.그러나 지금은 대부분의 시간을 인터페이스 구축기에 시달리고 UI 코드와 응용 프로그램 코드 사이를 왔다 갔다 하며 뛰어다닌다.
또한 이 모든 것이 좋습니다. 그러나 한 번 구축하고 싶지만, 모든 주요 운영체제에 배치하려면 어떻게 해야 합니까?

그냥사람을 낙담하게 했어아마도 이것은 나 개인의 인코딩에 대한 기대일 것이다. 그러나 선택은 나를 실망시켰다.
이 모든 것이 나를 돌아오게 했다electron.내가 돌아오라고 한 것은 그것이 새것이 아니기 때문이다.나는 너희들이 이미 전자 응용 프로그램에 관한 변론을 들었다고 믿는다.하지만 2021년에는 뷰 같은 것을 짝짓거나 순풍 CSS와 반응할 수 있어 흥분된다.열모듈 교체, 번개 같은 개발 구축, 익숙한 기술...이제 나는 번거로운 작업 절차가 아니라 응용 프로그램의 코드에 더 많은 정력을 쏟을 수 있다.
들어가자.

설치하다.

우리는 몇 부분으로 나누어 할 것이다.그것의 핵심은 인터넷 응용이다.
지금까지 저는 당신이 이미 들었다고 믿습니다debates
네트워크 기술로 데스크톱 응용을 만들다.솔직히 말하면, 이 글은 결코 이 문제에 대답하려고 시도하지 않았다.정답이 없다.만약 당신이 클릭해서 이 글을 읽는다면, 당신은 이 창고에 대해 약간의 흥미를 가지고 있기 때문에, 우리는 아주 멋진 것을 구축할 것이다.

위트 대로 Vue

우리는 우선 Vite 설치Vue를 우리의 응용 프로그램의 기초로 사용할 것이다.➜ yarn create @vitejs/app사용할 템플릿으로 vue를 선택하고 vvte qs로 이름을 지정하는 프롬프트를 실행합니다.이것은 프로젝트를 시작하는 데 사용할 템플릿을 만들 것입니다.완료되면 프로젝트를 작업 디렉토리로 설정하고 Thread를 실행하여 모든 의존 항목을 설치하고 dev 스크립트를 실행하여 개발 모드에서 프로젝트를 실행합니다.cd vvte-qs && yarn && yarn dev너는 결국 이것과 동일하거나 매우 비슷한 것을 보아야 한다.

브라우저를 열고 localhost:3000로 이동하면 다음이 표시됩니다.

완벽해!그것은 매우 쉽다.

순풍 사용자 인터페이스

이제 애플리케이션의 기반이 마련되었으므로 Tailwind CSS를 도입하여 UI를 구축하겠습니다.저는 개인적으로 네이티브 애플리케이션에서 개발한 UI 제품에 관심이 없습니다.너무 어려워요.
투자하고 싶은 소프트웨어 패키지를 찾으려면 UI가
CS101 프로젝트
최종적으로, 나는 UI 프레임워크/라이브러리에서 프로그래밍 방법을 사용하여 매우 멋있어 보이는 것을 만들 수 있기를 바란다.단독 소프트웨어로 사용자 인터페이스를 구축한 후에 코드로 물건을 한데 모으는 것은 나에게 있어서 정말 번거로운 일이다.게임 개발 같은 거 알겠어요.안 그러면 어떻게 할 거야?그러나 응용 프로그램 개발에 있어서는 너무 지나치다.
CSS/HTML을 어떻게 말하든지 간에 UI를 쉽게 구축하기에 매우 적합합니다.입력Tailwind CSS.Tailwind를 좋아하는 점은 Vue에서 구축할 구성 요소 기반 UI 아키텍처를 활용한다는 점입니다.Tailwind 클래스를 HTML에 직접 넣기만 하면 매우 매력적인 작업을 완성할 수 있습니다.이것은 CSS 클래스가 아닌 전체 구성 요소를 다시 사용해서 물건을 보존하도록 권장합니다. DRY대박이다.
순풍을 종속성으로 추가하려면 다음과 같이 하십시오.➜ yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/jit이어서 순풍이 분다.배치하다.js 및 PostSS배치하다.js 파일:➜ npx tailwindcss init -pPostSS에 다음을 추가해야 합니다.배치하다.js는 모든 Tailwind JIT의 장점을 얻을 수 있습니다.

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/jit': {},
    autoprefixer: {},
  }
}

그리고 다음 내용을 순풍 중의purge 속성에 적용합니다.배치하다.js config는 구문에서 사용되지 않는 컨텐트를 지웁니다.

// tailwind.config.js
module.exports = {
  purge: [
    './public/**/*.html',
    './src/**/*.{js,vue}',
  ],
  theme: {
    // ...
  }
  // ...
}

Tailwind를 응용 프로그램에 가져올 곳이 필요합니다.➜ touch src/assets/index.css그런 다음 파일을 열고 다음을 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

그것을 저장하고 css를main의 주 입구점에 포함합니다.js.

import { createApp } from 'vue'
import App from './App.vue'
import './assets/index.css'

createApp(App).mount('#app')

지금, 당신이 우리를 뛰게 한다면:

➜ yarn dev

우리는 다음과 같은 것을 얻었다.

볼품없다?하, 네 말이 맞다.Tailwind는 유틸리티 UI 도구이기 때문에 클래스를 사용하여 UI가 할 수 있는 모든 것을 확인해야 합니다.

요약

현재 우리는 우리의 응용 프로그램을 시작하기 위한 좋은 기초를 가지고 있다.아직 진정한 풍습은 없지만, 우리는 시작할 것이다.

참고 문헌

github repo - part 1