Vue.js - 설치 및 설정 (유튜브 코딩애플 1강)

1. Node.js 설치 (링크: https://nodejs.org/ko/)
2. Visual Studio Code 설치 (링크: https://code.visualstudio.com/)
3. Visual Studio Code 실행
4. Vue.js 개발환경 설정
   • 상단메뉴 → Terminal → New Terminal → npm install -g @vue/cli
   • 설치 에러날 경우 yarn으로 설치 (yarn global add @vue/cli)
5. Visual Studio Code 부가기능 설정
   • 상단메뉴 → View → Extensions 혹은 왼쪽 메뉴바

   • 

     왼쪽 메뉴바 Extensions

   • Vetur 설치 (Vue.js 도구)
   • HTML CSS Support 설치
   • Vue 3 Snippets 설치 (Vue.js 도구)
6. 프로젝트 생성
   1. 프로젝트 폴더 생성 (아무 곳이든 상관 없음)
   2. 상단메뉴 → File → Open Folder → 프로젝트 폴더 선택
   3. Terminal → vue create "프로젝트명" (보안 에러 날 경우: Set-ExecutionPolicy Unrestricted 입력)
   4. 상단메뉴 → File → Open Folder → "프로젝트명"으로 된 폴더 선택
7. 기본적으로 "프로젝트명" → src → App.vue 에서 코딩을 함
   • <template> : HTML 작성
   • <script> : JS 작성
   • <style> : CSS 작성
8. 서버 시작: Terminal → npm run serve
9. 참고
   • node_modules: 프로젝트에 쓰는 라이브러리 파일
   • public: html 파일, 기타 파일
   • src: 소스코드 파일
   • package.json: 라이브러리 버전, 프로젝트 설정 기록

동영상 링크: https://youtu.be/NONWar0jGLM