React.js에서 Vue.js로 전환을 시도했습니다.-JS 튜토리얼-php.cn

소개

몇 년 전, 다른 많은 사람들과 마찬가지로 저는 React.js 프런트엔드 라이브러리의 후크와 기능적 구성 요소가 등장하면서 "과장"되었습니다. 이는 Components 클래스보다 훨씬 적은 코드를 작성하여 완전히 새로운 개발 방법을 제공했습니다. 정말 한동안 푹 빠져 있었어요.

오늘 저는 새로운 클라이언트 프로젝트의 요구 사항을 충족하기 위해 Vue.js 프레임워크를 선택해야 했습니다. 그리고 이 프로젝트가 끝나자 저는 이것이 이 프레임워크의 새로운 사용자로서 여러분에게 피드백을 제공할 수 있는 기회라고 스스로에게 말했습니다.

그렇다면 이러한 기술 향상은 Vue.js의 악명에 걸맞은 것일까요?
요즘은 React보다 Vue에서 프론트엔드를 개발하는 것이 더 낫나요?

이것이 우리가 보게 될 것입니다!

프로젝트 시작

보일러 플레이트

프로젝트를 시작한다고 하는 사람은 힘든 구성 시간, 심지어 며칠을 절약할 수 있는 좋은 보일러플레이트를 찾고 있다고 합니다!
멀리 볼 필요 없이 npm create vue@latest 명령은 내 요구 사항을 대부분 충족합니다.

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

로그인 후 복사

Typescript 언어가 이미 지원되고 라우팅 시스템과 스토어가 제공되며 단위 및 엔드투엔드 테스트를 위한 여지도 있습니다!

기본적으로 Vite 번들러가 설치됩니다. 나를 불쾌하게 하지 않는 것은 무엇입니까!? 실제로 빌드가 빠르고 대부분의 경우 HMR(핫 모듈 교체)이 잘 작동합니다.

로컬 개발 서버를 시작하기 위해 작은 npm run dev를 실행하면 됩니다! 브라우저에서는 이미 실행 중입니다!

그리고 제작을 위해서요? npm run build 명령을 입력하기만 하면 입력 내용을 확인한 후 프로젝트가 dist 디렉터리에 정적 파일로 내보내집니다(Typescript가 활성화된 경우).

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

로그인 후 복사

프로젝트 아키텍처

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

로그인 후 복사

프로젝트의 건축적 측면에서 특히 다음을 발견했습니다.

main.ts, 앱 구성요소, 라우터 및 스토어의 연속 생성:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

로그인 후 복사

라우팅 및 저장소 관리를 위한 순수 .ts 파일
일부 구성 및 테스트 파일
... 그리고 물론 구성 요소(일반적이고 재사용 가능한 요소에 해당)와 뷰(상위 수준에 해당)로 구분되는 *.vue 파일 페이지)

간단히 말하면 파일 아키텍처는 상용구에서 많은 옵션을 확인했음에도 불구하고 다소 단순하고 React의 아키텍처와 상대적으로 유사합니다.
지금까지 React에서 나온 것은 전혀 새로운 것이 아닙니다. 그러면 상당한 차이가 나타납니다!

Vue 파일의 아키텍처

다음은 공식 웹사이트에서 영감을 받은 코드 조각입니다. 클릭하면 텍스트 색상이 변경되고 해당하는 경우 "위의 텍스트는 녹색입니다"라는 문구가 표시되지만 이는 *.vue 파일의 일반적인 아키텍처를 나타냅니다.

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

로그인 후 복사

@click을 사용한 이벤트 바인딩, v-if를 사용한 조건부 표시, v-bind()를 사용한 CSS 바인딩에 주목하세요.

코드는 매우 뚜렷한 3가지 부분으로 구분됩니다.

스크립트: 제어 코드;
템플릿: HTML 구조;
스타일: CSS 스타일 시트

그리고 이 세 부분은 결코 섞이지 않습니다?.
이는 제가 클라이언트 프로젝트 경험을 통해 개인적으로 경험한 몇 가지 장점이 있습니다.

HTML 구조는 명확하고 고정되어 있으며 매우 선언적 스타일입니다. 조건부로 표시되는 태그까지 포함하여 모든 것이 있습니다.
로직 부분과 디스플레이 부분이 잘 분리되어 있습니다.
타사 라이브러리를 설치하지 않고도 구성요소에 직접 연결되어 순수 CSS를 작성할 수 있습니다.
스타일 분리에도 불구하고 CSS에 변수를 삽입할 수 있습니다.