Vue3+TS+Vite 개발 기술: 빠른 패키징 및 핫 리로딩을 위해 Vite를 사용하는 방법

Vue3+TS+Vite 개발 기술: 빠른 패키징 및 핫 리로딩을 위해 Vite를 사용하는 방법

프론트 엔드 기술의 급속한 발전으로 Vue.js는 가장 인기 있는 JavaScript 프레임워크 중 하나가 되었습니다. Vue 생태계에서 최신 버전인 Vue3은 많은 흥미로운 새로운 기능과 개선 사항을 제공합니다. 새로운 유형의 구성 도구인 Vite는 ES 모듈의 기본 지원을 활용하여 매우 빠른 콜드 스타트 ​​및 핫 모듈 교체를 달성하므로 Vue3에서 선호하는 개발 도구입니다. 이 기사에서는 빠른 패키징 및 핫 리로딩에 대한 팁을 포함하여 Vue3 개발에 Vite를 사용하는 방법을 소개합니다.

1. Vite 프로젝트 설치 및 초기화

먼저 Vite를 설치하고 Vue3 프로젝트를 초기화해야 합니다.

npm install -g create-vite
create-vite my-vue-project
cd my-vue-project
npm install

2. Vite를 개발에 사용하세요

Vite로 개발하는 것은 매우 간단합니다. 다음 명령을 실행하면 됩니다.

npm run dev

Vite는 개발 서버를 로컬에서 시작하고 자동으로 브라우저 창을 엽니다. 이제 코드 작성을 시작할 수 있습니다. Vite는 필요에 따라 해당 모듈을 자동으로 로드하므로 전체 애플리케이션을 하나의 파일로 패키징하는 대신 필요한 코드만 로드할 수 있습니다. 이를 통해 개발 프로세스가 더 빠르고 효율적으로 이루어집니다.

3. 빠른 패키징

개발이 완료되면 배포 가능한 파일로 프로젝트를 패키징해야 합니다. Vite를 사용한 패키징은 매우 간단합니다. 다음 명령을 실행하기만 하면 됩니다.

npm run build

Vite는 자동으로 코드를 최적화하고 최적화된 파일을 생성합니다. Vite의 패키징 속도는 ES 모듈에 대한 기본 지원 덕분에 매우 빠릅니다.

4. 핫 리로드

핫 리로드는 Vue 개발에서 매우 중요한 기능입니다. 코드를 수정한 후 페이지를 자동으로 다시 로드할 수 있으므로 개발 프로세스에서 페이지를 수동으로 새로 고칠 필요가 없습니다. Vite는 Snowpack에서 제공하는 핫 모듈 교체 플러그인을 사용하여 효율적인 핫 리로딩을 구현합니다.

Vite를 사용하여 Vue3 프로젝트를 개발할 때 기본적으로 핫 리로딩이 자동으로 활성화됩니다. 브라우저의 개발자 도구에서 콘솔을 확인하여 자세한 핫 리로드 정보를 얻을 수 있습니다.

핫 리로딩 외에도 Vite에는 CSS 전처리기, 동적 가져오기 등과 같은 매우 유용한 내장 기능이 내장되어 있습니다. 다음 명령을 사용하여 SCSS 지원을 추가할 수 있습니다.

npm install -D sass

코드에서 SCSS 파일을 직접 도입할 수 있습니다.

import "./styles.scss"

5. TypeScript 사용

Vue3은 TypeScript에 대한 기본 지원을 제공하며 Vue 개발을 위해 TypeScript를 직접 사용할 수 있습니다. . Vite 프로젝트에서는 간단한 구성을 통해 TypeScript를 활성화할 수 있습니다.

먼저 main.js 파일을 main.ts로 변경하고 파일 내용을 수정해야 합니다. main.js文件改为main.ts，并修改文件内容：

import { createApp } from 'vue'
import App from './App.vue'

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

然后，在项目根目录下新增一个tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "lib": ["esnext", "dom"]
  },
  "exclude": ["node_modules"]
}

그런 다음 새 main.js를 추가합니다. 프로젝트 루트 디렉터리 code>tsconfig.json 파일의 ts 파일에 다음 내용을 입력합니다.

rrreee

위 구성으로 Vite 프로젝트에서 TypeScript를 사용할 수 있습니다. 유형 검사의 이점을 얻으면서 JavaScript를 사용하는 것처럼 Vue 구성 요소를 작성할 수 있습니다.

요약

Vue3 개발에 Vite를 사용하는 것은 효율적이고 빠른 선택입니다. ES 모듈의 기본 지원을 활용하여 빠른 패키징 및 핫 리로딩을 달성하여 개발 효율성을 크게 향상시킵니다. 또한 Vite는 CSS 전처리기와 TypeScript도 지원하여 개발 프로세스를 더욱 풍부하고 유연하게 만듭니다. 이 글이 귀하의 Vue3+TS+Vite 개발에 도움이 되기를 바랍니다. 🎜

위 내용은 Vue3+TS+Vite 개발 기술: 빠른 패키징 및 핫 리로딩을 위해 Vite를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!