>  기사  >  웹 프론트엔드  >  Vite3.0이 출시되었습니다. Vite3.0의 새로운 기능을 살펴보세요

Vite3.0이 출시되었습니다. Vite3.0의 새로운 기능을 살펴보세요

青灯夜游
青灯夜游앞으로
2022-07-22 11:16:063724검색

Vite3 3.0이 출시되었습니다. 아직도 스크롤 중이신가요? 다음 기사에서는 Vite3.0의 새로운 기능을 살펴보겠습니다. 현재 프런트 엔드는 매우 빠르게 발전하고 있으며 새로운 기술에 대한 민감성을 유지해야만 우리가 사라지지 않을 수 있습니다.

얼마 전 유다는 Vite3.0을 출시하고 아래와 같이 Vite 공식 문서를 업데이트했습니다

Vite3.0이 출시되었습니다. Vite3.0의 새로운 기능을 살펴보세요

그나저나 홈페이지에 들어가보니 기분이 묘하네요.

이 문서에서는 Vite3.0의 새로운 기능을 간략하게 소개하므로 혼동하지 마세요.

템플릿 변경

제가 Vite로 가장 많이 만드는 Vue 프로젝트는 이번 업데이트 이후 Vite를 사용하여 만든 Vue 템플릿의 테마가 Vite의 문서와 일치하며 밝은 색상도 지원합니다. 컬러 모드로 바뀌고 아이콘이 Vue 로고에서 Vite 로고로 변경됩니다.

Vite를 사용하여 Vue 템플릿을 만들고 실행하여 효과를 확인할 수 있습니다.

pnpm create vite
# project name -> demo
# select a framework -> vue
# select a variant -> vue
cd demo
pnpm install
pnpm dev

두 가지 테마는 다음과 같습니다

Vite3.0이 출시되었습니다. Vite3.0의 새로운 기능을 살펴보세요

Vue 외에도 다음 템플릿의 테마도 일관됩니다.

Vite3.0이 출시되었습니다. Vite3.0의 새로운 기능을 살펴보세요

Vite CLI 최적화

명령줄의 Vite CLI 스타일도 최적화되었습니다. 아래 그림을 보세요

Vite3.0이 출시되었습니다. Vite3.0의 새로운 기능을 살펴보세요

왼쪽이 Vite3.0이고 Vite2.0이 켜져 있습니다. 오른쪽. 시각적으로 분명히 3.0이 2.0보다 좋아 보입니다.

외관과 더불어 기본 포트 번호도 3000에서 5173으로 변경되었음을 알 수 있습니다. 로컬 주소가 localhost에서 127.0.0.1 코드>.

localhost变成了127.0.0.1

import.meta.glob API的变化

import.meta.globAPI可以动态的导入文件,在Vite3中允许import.meta.globimport.meta.glob API의 변경 사항

import.meta.globAPI는 Vite3import에서 허용되는 파일을 동적으로 가져올 수 있습니다. .meta.glob이 다시 작성되었습니다. 자세한 내용은 공식 문서에 자세히 설명되어 있는

Glob 가져오기 양식을 참조하세요.

기타 콘텐츠

  • Vite3.0은 다음과 같은 일부 다른 콘텐츠도 업데이트했습니다.

  • Vite의 전체 크기가 작아졌습니다.

  • JS 및 CSS 압축 도구는 ESbuild를 사용합니다(Vite2에서 시작).

  • 여러 버그가 수정되었습니다.
  • 호환성이 조정되었습니다.

    node14.18+
  • 에 대한 최소 지원
  • Vite는

    매년 새 버전을 출시하기로 결정했습니다
  • ;
작성일: end

이 글에서는 Vite의 몇 가지 새로운 기능을 간략하게 소개합니다.

이제 프론트엔드 개발 속도는 매우 빨라졌습니다.

항상 새로운 기술에 대한 민감성을 유지해야만 탈락하지 않을 수 있습니다

, 모두 어서 오세요~마지막으로, 다음과 같이 기원합니다. 매일 야근을 하지 마세요. 연봉이 10만이 넘을 것입니다.

【추천 관련 동영상 튜토리얼:

vuejs 입문 튜토리얼

, 웹 프론트엔드 시작하기

위 내용은 Vite3.0이 출시되었습니다. Vite3.0의 새로운 기능을 살펴보세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제