Vue 1강 : Vue 3버전 설치랑 셋팅

https://www.youtube.com/watch?v=NONWar0jGLM&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=2

1. Node.js 설치
   • Node.js 설치하면 npm 쓸 수 있음
   • npm은 각종 웹개발 라이브러리 설치 도우미이다. ( yarn도 마찬가지 )
   • npm으로 @vue/cli 설치할 수 있다.
     • vue 프로젝트 빠르게 생성해주는 라이브러리
     • 프로젝트 생성은 vue create 프로젝트
2. VScode 에디터 설치
3. 에디터 상단 Terminal - New Terminal
   1. npm install -g @vue/cli@4.5.11
      • vue 개발환경 셋팅 도와주는 프로그램
   2. Extension
      1. Vetur 설치
      2. Vue 3 Snippets 설치
      3. HTML CSS Support 설치
4. Vue 프로젝트 생성
   1. 작업용 폴더 만들기
   2. 에디터에서 해당 폴더 오픈
   3. 터미널에서 vue create 프로젝트명(vuedongsan) -> Enter
   4. 선택 - Vue 3
      • 하위폴더로 뷰프로젝트가 생성된다.
      • 이 폴더를 에디터로 오픈하고 코딩을 시작하면 된다.
        • 오픈폴더 - 에디터에서 작업폴더로 생성된 vuedongsan을 오픈하면 된다.

 

5. App.vue에다가 코드를 짜면 된다.

• App.vue는 메인 페이지이다.
  • <template> 안에는 HTML 짜기
  • <script> 안에는 JS 짜기
  • <style> 안에는 CSS 짜기
• 사실 웹브라우저는 vue 파일을 해석할 수 없다..
  코드를 짜서 웹브라우저에 띄울 수 있는 이유는 App.vue에 있던 파일을 html로 바꿔서 실제 html 페이지에 박아주기 때문에 웹사이트처럼 동작할 수 있는 것이다.
  • 이러한 작업을 main.js가 해준다.
  • index.html이 메인 페이지로 동작된다.

• 만약 내가 짠 코드 미리보기 띄우고 싶을 경우 터미널에 npm run serve 치고 Enter ( 실시간 미리보기 )
• 또는 좌측 하단 NPM SCRIPTS - serve 의 재생 눌러도 실행됨
  • 터미널에서 사이트가 뜰텐데, 해당 부분을 ctrl + click 하거나 크롬에서 해당 주소 복붙하면 페이지가 뜰 것이다.

ctrl + 클릭 시 오픈되는 페이지

• node_modules
  • 프로젝트를 위한 모든 라이브러리를 쑤셔박아넣은 폴더
• src
  • 실제 코드 짜는 공간
• public
  • html, 기타 파일 보관
• package.json
  • 라이브러리 버전, 프로젝트 설정 기록