출처
컴포넌트란?!
재사용이 가능한 UI를 컴포넌트라고 한다.
화면 확인
이런 화면을 뽑아 내기 위해서는 중복되는 코드들이 많이 발생한다.
이걸 컴포넌트화해서 재사용하는 문법을 제공한다.
컴포넌트화 되지 않은 코드
문자열 템플릿 컴포넌트 정리하기
컴포넌트를 만들고 사용하는 것은 크게 3단계로 나누어지는 데,
컴포넌트 정의 → 컴포넌트 등록 → 컴포넌트 사용 으로 이루어진다.
문자열 템플릿
•
정의
반복되는 구간을 BookComponent로 정의한다.
•
컴포넌트 등록
이렇게 app.component로 컴포넌트를 등록할 수 있다.
•
컴포넌트 사용
컴포넌트를 만들고, 등록하면 태그처럼 사용하면 된다.
•
확인
이렇게 컴포넌트로 다섯개를 만들어 보았다.
아 그리고, 태그내에서 사용할 때는 파스칼표기법을 사용하면 안되고, 소문자와 하이픈으로 사용해야된다.
그대로 표현이 되고 있다.
JS 파일 분리
•
폴더 구조 만들기
src > componets 내부에 컴포넌트 js 파일을 만든다.
•
export default
const 컴포넌트명 대신 export default로 정의해줘야 밖에서 가져와 쓸 수 있다.
•
main.ts
import App from "./App.js";
import AppHeader from "./components/AppHeader.js";
import AppNav from "./components/AppNav.js";
import AppView from "./components/AppView.js";
import BookComponent from "./components/BookComponent.js";
const app = Vue.createApp({});
app.component("BookComponent", BookComponent);
app.component("AppHeader", AppHeader);
app.component("AppNav", AppNav);
app.component("AppView", AppView);
app.component("App", App);
app.mount("#app");
JavaScript
복사
이렇게 import해서 쓰면 되는데, 에러가 난다.
모듈 바깥에서는 임포트 할수 없다라는 문구
•
index.html
임포트 문법을 쓰는 파일은 module타입을 지정해줘야된다.
싱글 파일 컴포넌트 SFC
.vue 확장자를 가지는 파일들을 일컫는다.
vue파일 구조
template 태그를 사용할 수 있고,
export default문법은 script내부에 정의한데
스타일도 추가할 수 있지만, 지금은 아님
모든 파일을 변경
우리가 SFC로 개발하기 위해서는 빌드 도구가 필요하다!
Vite 또는 VueCLI를 설치해야된다고 한다.
Vite 빌드도구 설치
•
npm 초기화
npm init -y
JavaScript
복사
package.json이 생성된 걸 볼 수 있다.
•
vue cli설치
npm i vue
JavaScript
복사
vue가 설치 된 것을 확인할 수 있다.
•
vite 설치
npm i vite
JavaScript
복사
vite 설치 확인
•
플러그인 설치
npm i @vitejs/plugin-vue
JavaScript
복사
설치 확인
•
vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [vue()]
}
JavaScript
복사
루트 디렉토리에 붙여넣어주면 된다.
dev 실행명령어 설정
package.json 파일에서
script 항목에 “dev” : “vite” 를 추가한다.
그럼 npm run dev로 실행 가능
main.js
이렇게 createApp 메소드도 가져올 수 있다.
밑에 const app은 이렇게 명시 해도 된다.
css 분리
•
폴더 생성
src > assets 폴더 내부에 base.css 를 만들고 스타일을 다 가져온다.
루트 컴포넌트 (App.vue)에서 스타일 임포트
@를 사용해서 base.css를 임포트 한다.