Vue는 단일 페이지 애플리케이션 개발을 위해 설계된 오픈 소스 JavaScript 프레임워크입니다. Vue가 계속 개발됨에 따라 개발자는 이를 패키지화하고 프로덕션 환경에 배포하는 방법에 집중하기 시작합니다. 이 글에서는 Vue가 패키징된 후 생성된 일부 파일과 폴더를 소개합니다.
생성된 파일을 소개하기 전에 먼저 Vue 애플리케이션 패키징을 위한 도구인 Webpack을 소개해야 합니다. Webpack은 필요한 모든 파일을 정적 리소스로 변환하고 이를 하나 이상의 패키지로 묶는 정적 모듈 패키징 도구입니다. Vue 프로젝트에서는 패키징을 위해 Webpack을 자주 사용합니다.
Vue 애플리케이션을 패키징한 후 "dist"라는 폴더가 표시됩니다. 이 폴더에는 서버에 배포된 코드 베이스인 전체 패키지 애플리케이션에 대한 코드와 리소스가 포함되어 있습니다. "dist" 폴더에 있는 몇 가지 중요한 파일과 폴더를 살펴보겠습니다.
index.html은 애플리케이션의 항목 파일입니다. 이 파일은 Webpack 패키징으로 생성된 유일한 HTML 파일입니다. 여기에는 Vue 애플리케이션을 위한 모든 JavaScript 및 CSS 코드는 물론 이러한 파일을 로드하는 데 사용되는 스크립트 및 태그가 포함되어 있습니다.
JS 파일은 모두 Vue 앱의 JavaScript 코드입니다. Vue 프로젝트에는 app.js와 Vendor.js라는 두 가지 주요 JavaScript 파일이 있습니다. app.js에는 Vue 구성 요소와 애플리케이션의 모든 논리 코드가 포함되어 있습니다. Vendor.js에는 타사 라이브러리와 종속성이 포함되어 있습니다.
CSS 파일은 Vue 애플리케이션의 스타일시트입니다. Vue 프로젝트에는 일반적으로 app.css와 Vendor.css라는 두 가지 주요 CSS 파일이 있습니다. app.css에는 애플리케이션의 모든 스타일이 포함되어 있고, Vendor.css에는 타사 라이브러리 및 종속성에 대한 스타일이 포함되어 있습니다.
정적 폴더에는 이미지 및 글꼴 파일과 같은 응용 프로그램의 정적 리소스가 포함되어 있습니다. 이러한 파일은 웹 응용 프로그램에서 자주 사용됩니다.
Vue 애플리케이션에서 Webpack은 코드를 패키징하고 빌드하는 데 사용되는 도구입니다. 필요한 모든 파일을 정적 리소스로 변환하고 하나 이상의 패키지로 묶습니다. 패키징이 완료되면 Vue 애플리케이션 코드가 포함된 HTML, JavaScript 및 CSS 파일이 "dist" 폴더에 생성됩니다. 또한 정적 폴더에서 모든 정적 리소스를 찾을 수도 있습니다. 이를 알면 애플리케이션 개발에 Vue를 사용할 때 코드를 더 잘 이해하고 배포할 수 있습니다.
위 내용은 vue가 패키징된 후에는 무엇이 생성되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
