Vue CLI 설치

<aside> 💡 Vue.js 개발을 위해 프로젝트 생성, 구성 및 관리를 도와주는 표준 도구

</aside>

npm install -g @vue/cli

프로젝트 생성

vue create {project-name}

• 윈도우에서 vue 명령어가 실행이 안 될 경우 윈도우 실행정책을 변경해주어야 함

  Set-ExecutionPolicy RemoteSigned
  

라이브러리 설치

npm install [vuex axios vue-router]

프로젝트 구조

프로젝트-이름/
├─ node_modules/
├─ public/
├─ src/
│  ├─ assets/
│  ├─ components/
│  ├─ views/
│  │  ├─ Home.vue
│  │  ├─ Login.vue
│  │  └─ Register.vue
│  ├─ App.vue
│  ├─ main.js
│  ├─ router.js
│  └─ store.js
├─ .gitignore
├─ babel.config.js
├─ package.json
└─ README.md

• node_modules

  프로젝트의 모든 의존성(라이브러리 및 프레임워크 등)이 설치되는 폴더입니다. npm이나 yarn 같은 패키지 매니저를 사용해 패키지를 설치할 때, 해당 패키지들은 이 폴더에 저장됩니다.

• public

  정적 파일을 저장하는 폴더입니다. 예를 들어, index.html, 로고 이미지, 아이콘 등이 이 폴더 안에 위치합니다. 이 폴더의 내용은 빌드 과정에서 그대로 복사되어 최종 결과물에 포함됩니다.

• src

  소스 코드를 포함하는 폴더입니다. Vue 애플리케이션의 대부분의 개발 작업은 이 폴더 안에서 이루어집니다.

• src/assetes/

  이미지, 글꼴, 스타일시트 등과 같은 자산 파일들을 저장하는 곳입니다. Vue 컴포넌트에서 이 파일들을 임포트하여 사용할 수 있습니다.

• src/components/

  재사용 가능한 Vue 컴포넌트 파일들을 저장하는 폴더입니다. 예를 들어, 버튼, 헤더, 푸터 등의 작은 단위의 컴포넌트들이 여기에 포함됩니다.

• src/views/

  각각의 페이지를 나타내는 Vue 컴포넌트들을 저장하는 폴더입니다. 일반적으로 라우터에 의해 직접적으로 로드되는 컴포넌트들이 여기에 위치합니다.

• src/App.vue

  애플리케이션의 루트 컴포넌트입니다. 다른 모든 컴포넌트들은 이 컴포넌트 안에 포함되어 있습니다.