혹시 처음 시작한다고 검색했다가 여길 들어오신 분은 나를 다 믿지 마세요...
다른 좋은 가르침들 많으니 날 떠나가라...

0. 설치

웹, 프론트엔드를 담당하는 프레임워크!

VS code에서 하면 됨

1) node.js 설치

node.js 검색해서 맨 처음 나오는, org로 끝나는 그 페이지에 들어가면 설치 버튼이 두개 나오는데 왼쪽의 LTS 설치하는 게 안정감 있고 좋다고 함

vscode 터미널에서

node -v

입력해서 설치가 잘 되었는지 확인(버전을 알려주면 잘 된 것)
이걸 설치함으로써 npm(node.js project manager) 명령어를 사용할 수 있게 됨

2) vue 설치

마찬가지로 터미널에서 설치해주고 버전 확인!

npm install vue
npm vue -v

3) vue-cli 설치

command line interface

검색 결과 두가지 코드가 있더라

최종 결정된 코드는

npm install -g @vue/cli 

다른 건

npm install vue-cli -global

처음에는 아래쪽 코드로 했는데 그러면
C:\Users\User\AppData\Roaming\npm\node_modules
안에 vue-cli 폴더가 바로 생기고

위쪽 코드로 하면 node_modules 안에 @vue 폴더가 생기고, 그 안에 cli(, cli-init) 폴더가 생긴다

+ 버전은 다 뜨는데 vue command가 not found일 때(안 먹을 때)

나는 이상하게도 버전 확인하니 알려주기에 예전에 vue-cli를 설치한 적 있구나 하고 다음으로 넘어가려 했는데

제대로 안 되더라

vue -V
bash: vue: command not found

가 계속 떠...

알아보니
C:\Users\User\AppData\Roaming\npm\node_modules
(C:\Users{내 사용자 이름}\AppData\Roaming\npm\node_modules)
에 들어가보면 [@vue 폴더, 그 안에 cli가 있거나 / 바로 vue-cli]가 있어야 제대로 설치된 것인데 들어가보니 없더라
firebase-tools만 있었음

그래서 vue-cli 설치해주고 환경변수 path에
C:\Users\User\AppData\Roaming\npm\node_modules\@vue\cli\bin
(vue-cli 바로 설치한 경우에는
C:\Users\User\AppData\Roaming\npm\node_modules\vue-cli\bin)
를 등록해주니 잘 동작함!

4) cli-init 설치

npm i -g @vue/cli-init

5) Vue.js devtools

크롬 웹스토어에서 Vue.js devtools 확장 프로그램 추가해서 실행해보는 데 사용(사실 이건 뭐하는 건지 아직 잘 모름)

1. 드디어, 시작하기

1) 프로젝트 만들기

vue create 프로젝트이름

이렇게 뜬다
그럼 n을 입력한다
(이유는 검색 3페이지 정도 했는데 다들 모른다 하더라...)

그러면 vue 3 쓸거냐, vue 2 쓸거냐를 물어보는데 방향키로 조작하고 원하는 데서 엔터

다른 데서는 npm 쓸지 yarn 쓸지도 물어봐준다는데 나는 왜 안 물어봐주지(섭섭)
그런 상황이 오면 npm 쓴다고 해야지 라고 알아보기까지 했는데
어쨌든 이렇게 만들어지면 vscode를 실행한 폴더 하위에 내가 입력한 '프로젝트이름' 으로 폴더가 하나 생긴다

vscode에서도 생성된 상황 볼 수 있음

2) 프로젝트 실행

cd 프로젝트이름/
npm run serve

로 실행해주고 크롬 주소창에 localhost:8080 입력하면

쨘

종료인지는 모르겠지만 터미널이 다음 입력할 기회를 안 주고 있는 상황을 벗어나려면 ctrl + c

+)

git에서 clone 해온 거 실행시켰을 때

'vue-cli-service'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

이 난리를 피우면 실행 프로젝트 하위에 node_modules라는 폴더가 있는지 확인하고, 없으면

npm i

해서 만들어주자

3)

• 컴포넌트:
  버튼이라고 생각하면 쉬움
  로고나 메뉴, 모달 등 웹 구성 UI 요소
• single pa
  화면 구성 요소들을 미리 다 불러와 놓고 바뀌어야할 부분만 불러와서 바꿈
  그 부분만 바꿔서 보여주는 역할이 라우터

라우터 설치

npm install vue-router --save

뷰용 부트스트랩 설치 - 얜 왜 하더라

npm install vue bootstrap-vue bootstrap

• 인스턴스(instance) = 파이썬의 class 같은 거

생성은

new Vue({
			el: 뷰로 만든(인스턴스)가 그려지는 화면의 시작점,
            template: 화면에 표시할 HTML, CSS 등의 마크업 요소(뷰의 데이터, 기타 속성들 포함)를 정의하는 속성,
            data: 뷰의 반응성(Reactivity)이 반영된 데이터 속성,
            methods: 화면의 동작과 이벤트 로직을 제어하는 메서드,
            created: 뷰의 라이프 사이클과 관련,
            watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성,
		});

or

var vm = new Vue();

Module not found: Error: Can't resolve 'jquery' in 'C:\Users\User\Desktop\vuestart\프로젝트이름\components'
이런 거 뜨면 jquery 깔아줘야한다는 거래
= index.js에서 jquery 모듈을 사용하는데 설치가 안 되어있어 나는 에러

4) v-for

<div class="배열이름" v-for="(item, index) in 배열이름" :key="index">
	<span class="어쩌구">{{item.속성}}</span>
	<div class="저쩌구" @click="부를함수" :index="index"></div>
</div>