프런트 엔드 프레임워크 Vue.js는 많은 개발자의 첫 번째 선택이 되었습니다. Vue.js 프로젝트에서는 개발 시간을 절약할 뿐만 아니라 코드의 유지 관리성과 확장성을 향상시키는 좋은 스캐폴딩을 사용하는 것이 매우 중요합니다. 그러나 Vue.js 스캐폴딩을 사용하는 과정에서 흔히 묻는 질문은 JS 파일을 어디에 배치할 것인가 하는 것입니다.
가장 먼저 이해해야 할 점은 Vue.js 프로젝트에는 Vue 구성 요소(.vue 파일)와 독립 JavaScript 파일(.js 파일)이라는 두 가지 주요 JavaScript 파일 유형이 있다는 것입니다.
Vue 구성 요소는 HTML, CSS 및 JavaScript 코드를 포함하는 독립형 단위입니다. Vue.js 스캐폴딩은 Vue 구성 요소에 대한 템플릿, 스크립트 및 스타일로 구성된 .vue 파일 형식의 구성 요소를 처리합니다. 이 파일은 일반적으로 src/comComponents 폴더에 있습니다. 각 Vue 구성 요소 폴더에는 다음이 포함되어야 합니다.
[name].vue
여기서 [name]은 구성 요소 이름으로 바꿀 수 있습니다. 예를 들어 Header.vue, Footer.vue 등이 있습니다. 각 .vue 파일에는 다음 내용이 포함되어야 합니다.
<template> <!-- HTML代码 --> </template> <script> export default{ // JavaScript代码 }; </script> <style> /* CSS代码 */ </style>
Vue 구성 요소에서는 DOM 조작을 최대한 피해야 하며 모든 JavaScript 코드는 현재 구성 요소의 범위로 제한되어야 합니다.
Vue 구성 요소는 태그를 통해 HTML 콘텐츠를 정의하고,