#01 VUE , 아직은 나한테 어려운 너.. 🔥

처음에 VUE를 봤을때, 너란 아이. 생소하기만 했다.

프레임워크? 라우터? 뭔소리여... 이런 생각 뿐... 절대 친해지지 못할.. 그런 아이.

마치.. 외국어 1도 모르는데 외국에 홀로 남겨진 느낌이었다.. (?)

 

 

하지만.. VUE에 관한 유튜브도 보고, 블로그도 보고, 구글링도 하면서... 

이제 조금은 VUE에 대해 이해가 가기 시작했다.

아 근데.. 갑자기 쓰다보니 일기가 되버렸다 ;;

오늘 공부한 거 써야지... (잉여잉여) 🙄

 

 

★ cli, router 설치법 ★

 

그냥 이거 쓰셈

 

npm install -g @vue/cli

npm install vue-router --save

 

하하 완벽해!

그리고 폴더를 만들어주자.

 

vue create lalalalala

 

보라색부분 lalalala저거는 다른거로 써도댐

그냥 프로젝트명 지으란 소리였음.

 

내가 만든 폴더명과 파일명.

 

폴더 / 파일명은 이분 걸 보고 참고했다....

↓

이해 완전 잘됨~!~! 채고 채고~! 

 

 

★ 공부한 내용중 몰랐었던 단어들 짚어보깅 ★

 

 

https://m.blog.naver.com/mgveg/221920917734

[Vue.js] Router로 페이지 구성해보기

 

 

 ROUTER   그냥 한마디로 다른 경로로 연결해 주는 것

예를 들어 localhost:8080이라 하면

localhost:8080/header 들어가면 Header 컴포넌트가 나옴.

첨엔 '컴포넌트요?' 먼 🐶소리지? 이생각을 했었다.

그래서 나중에 내가 또 그런 생각을 할까봐 다시 한번 짚고 넘어가야겠다.

 

즉,

Header.vue

여기에 있는 내용이

localhost:8080/header 안에 쏘오오옥!!!!!!!!!!!

 

 

★ 퍄라밤 ★

☆ 변신☆

 

 

 

그라믄 일케되더라.

localhost:8080/header

위에있는 ㅎㅇ는 App.vue에서 header 받아와서 있는거임.

밑에거 보면 댐.

 

 

>> 그리고.. 만든 파일 / 폴더에 대한 브리핑을 해봐야겠다 캬컄🤣

 

App.vue

 

Header.vue를 넣고싶어서 파일 경로를 통해 저렇게 넣엇슴.

import 옆 이름(?)은.. 변수명처럼 아무거나 해도 되나보다.

merong 이런거 해도 된다.. (지금 확인해봤음)

 

 

맞다. vue를 사용하려면

<template></template>

<script>export default{ }</script>

<style></style>

이 국룰이라고 한다.

 

 

export default{ } 안에는 name 이 있는데 그냥 짓고싶은대로 지으면 된다더라.

imcute 이런식으로 지어도 된다.

 

 

물론 실제로 그렇게 적으면 eva 일 것 같으니

그냥 Header처럼 평범하게 써야겠다.

 

 

components : { } 안에는 import 이름 from '샬라샬라.vue'

이렇게 썼던 것에서 이름 을 적어주면 된다.

그 컴포넌트 안쓰고 싶으면 빼버리고 다른 컴포넌트 명 이름 쓰면댐

(물론 import 된거) 

 

router.js

1,2,6, 8~ 줄에 있는 코드! router.js에서 써야하는 코드이다.

 

대략 뜻 해석

1) header.vue에 router 기능 넣고 싶어서 import 함

2) Router기능 사용하고 싶어서 import 뭐시기 vue-router을 넣었음

3) Vue.use(VueRouter); 도 넣었음 (여기 vue 파일에서 router 사용한단 뜻)

4) localhost:8080/header 치면 Header 컴포넌트가 나옴

 

이런 뜻^^

 

 

Main.js

Router 쓸거면 Main.js에다 router, 써주셈.쉼표 있어야 되더라고요

아님 에러뜨던데 ㄷㄷ

여기도 마찬가지로 import router from "./router"

 

하하 내가 잘 이해한 건진 모르겠지만...

어쨌든 아주 기초적인 부분 이해를 해보았다!!

그래도 먼가 감이 살짝 잡힌 것 같아서 뿌듯함 ^~^

 

이제 약간.. 뭐랄까.. 외국에서 인사법 정돈 터득한 느낌..?

아직 갈 길은 멀다... 후후,,

 

 

헤헿공부다하면메이플하러가야지

 

 

 

ROUTER 공부하기 좋은 블로그 (개인적으루)

http://yoonbumtae.com/?p=2946

Vue.js: 라우터(Vue Router) 기초 - BGSMM

참고하기 딱이다 🥰

 

 

 

 

👩‍🦰 아직 많이 미숙해요!  틀린 점 있거나 제가 잘못 이해한 것 같은 부분이 있으면 댓글 주세요! 대환영이에요~