[Vue3] 1. Vue를 사용하는 이유와 설치방법

Vue를 사용하는 이유

• 자바스크립트 DOM을 사용하는 것은 매우 피곤한 작업인데 이런 작업을 쉽게 할 수 있음
• 동적 데이터 처리를 수월하게 수행 가능
• 컴포넌트 기반으로 UI 요소들을 모듈화 할 수 있음
• Vue에서 제공하는 디렉티브들도 조건문이나 반복문 등을 쉽게 구현가능함
• 가볍고 성능이 좋음

Vue.js의 프로젝트 구조

.
├── public
│   ├── index.html
│   └── ...
├── src
│   ├── assets
│   │   └── ... (이미지, 스타일 파일 등)
│   ├── components
│   │   └── ... (공통으로 사용하는 컴포넌트)
│   ├── views
│   │   └── ... (각 페이지 컴포넌트)
│   ├── router
│   │   └── index.js (라우터 설정)
│   ├── store
│   │   └── index.js (Vuex 상태 관리)
│   ├── App.vue
│   ├── main.js (진입 파일)
│   └── ...
├── package.json
└── ...

프로젝트 구조 설명

• public: 정적 파일이 위치하는 디렉토리로, index.html 파일이 포함됩니다.
• src: 소스 코드가 포함된 디렉토리로, 프로젝트의 핵심 부분입니다.
  • assets: 이미지, 스타일 파일 등 정적 자원이 포함됩니다.
  • components: 재사용 가능한 컴포넌트가 포함됩니다.
  • views: 페이지 단위의 컴포넌트가 포함됩니다.
  • router: Vue Router 설정 파일이 포함됩니다.
  • store: Vuex 상태 관리 파일이 포함됩니다.
  • App.vue: 최상위 컴포넌트입니다.
  • main.js: 애플리케이션의 진입 파일로, Vue 인스턴스를 생성하고 설정하는 파일입니다

---

설치

• node.js LTS 버전 설치

Node.js — Node.js® 다운로드

• VSCode

Visual Studio Code - Code Editing. Redefined

 

1. VSCode의 터미널 창에서 vue cli 개발환경 설정 도구 설치

npm install -g @vue/cli

 

• 아래와 같은 오류가 뜬다면

npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=13517 0)를 참조하십시오. 위치 줄:1 문자:1 + npm install -g @vue/cli + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess

• PowerShell을 관리자 권한으로 실행하고 아래 코드를 입력

Set-ExecutionPolicy Unrestricted

 

 

  2. 확장 기능 설치

• Vue - Official
• vue3-snippets-for-vscode (코드 자동완성 기능)
• (추천) Material Icon Theme (폴더 아이콘)

 

   3.  프로젝트 생성

vue create [프로젝트 명]

 

 

  4. 프로젝트 생성 후 프로젝트 폴더로 이동

cd [프로젝트명]
code . # 새 창에서 열기