Vue 시작하기 [패스트캠퍼스 챌린지 26일차]

Vue.js

뷰 시작하기

개요

모던 웹 프론트엔드 개발의 꽃

framework들 : Vue React Svelte Angular

이중에 하나는 알아야 함

그중 특히 뷰가 사용 난이도도 낮고 성숙도도 높은 편이라 입문자에게 권장

현실적으로는 React 잡이 더 많음

뷰 공식 사이트

Vue.js 3버전

뷰는 공식문서가 잘 정리되어 있으니 참고

Vue.js

---

CDN, Codepen

설치 방법

설치방법 | Vue.js

각 버전에 대한 자세한 정보는 릴리즈 정보를 참고

CDN

스크립트 태그로 연결

• 간단하게 문법 확인이나 연습 프로젝트 할 거라면 CDN,
• 더 풍성하게 사용하려면 npm으로 설치 추천
• CDN 복사하고, codepen html에 붙여넣기 해서 간단하게 쓸 수도 있음
• 아니면 스크립트 태그 안에 주소만 복사해서 코드팬 JS 옵션에 넣어주면 됨

---

Vue CLI, Vetur

CLI

Vue.js는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 공식 CLI를 제공함

CLI를 이용해서 뷰 프로젝트를 만들려면

npm

• npm i -g @vue/cli 전역 설치

Creating a Project | Vue CLI

• vue create 생성할폴더이름 프로젝트 폴더 생성
  • 프리셋은 3버전으로 고르기
  • 설치 끝나면 시작하기 명령 알려줌
  • $ cd vue3-test $ npm run serve
• cd 생성한폴더이름
• code . -r

— 설명 —

• package.json 폴더 확인
  • scripts 안에 serve는 우리가 알던 그 dev와 동일- 개발 서버용
  • 뷰가 잘 작성됐는지 확인하기 위해 lint
• 뷰 cli는 내부적으로 웹팩을 사용하고 있는데, 웹팩에 대한 기본적인 옵션은 숨겨져 있음
  • 대신 그 숨겨진 걸 vue-cli-service라는 걸 통해 제공하고 있는 거임
• 코드 규칙들 eslintConfig
  • rules에 입맛에 맞게 추가할 수도 있음
• browserslist
  • 바벨이나 postcss 사용 가능

→ 옵션들이 알아서 다 잡혀 있음. 초보자에게 좋다는 장점

→ 세부적인 것들을 정리하면서 나만의 프로젝트를 관리하고 싶은 사람한테는 아쉬운 부분

• public 폴더에 index.html app이란 아이디는, src 폴더 main.js와 연결됨
• app.vue
  • 세 가지 구조 template, script, style

vetur

확장 프로그램 설치해서
vue 확장자 내용에 하이라이트 되게 하기

---

뷰....
제일 쉬운 거라면서요
ㅠ
리엑트는 얼마나 정신 없는 녀석일까

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online