Vue 프로젝트 Directory 구조 생성
Vue 프로젝트를 vue-cli 명령어로 입력해서 프로젝트 구조를 생성한다.1
vue create <project name>
vue-cli 2.x 버전에서는 프로젝트 생성시, 선택가능한 템플릿(simple, webpack 등)이 있었으나, vue-cli 3 버전부터는 기본적인 프로젝트를 먼저 생성하고, 필요한 플러그인을 그때마다 추가하여 자신이 원하는 구조로 프로젝트를 변경할 수 있게 되었다.
플러그인 설치
기본적으로, 프로젝트를 생성할 때 pre-installed 플러그인을 추가하여 설치할 수 있다. 이후, 필요한 플러그인이 있을 때마다 다음과 같은 명령어로 이미 생성된 프로젝트에 플러그인을 추가할 수 있다.1
vue add @vue/eslint
@vue/eslint 명령어는 @vue/cli-plugin-eslint 명령어의 약어다.
플러그인 중에서 vue-roter와 vuex는 특별한 케이스로 다음과 같이 설치한다.1
2vue add router
vue add vuex
Vue 프로젝트 파일과 구조
Vue 프로젝트 생성시, 생성되는 파일과 구조는 다음과 같다.
| Directory/File | Description |
|---|---|
| dist | Production용으로 빌드를 하면, 최종 결과물이 나오는 Directory |
| public | 공용으로 접근 가능한 Directory |
| public/index.html | 어플리케이션의 뼈대가 되는 html 파일 |
| public/favicon.io | 웹브라우저 주소창에 표시되는 웹사이트를 대표하는 아이콘 |
| src | 애플리케이션의 소스코드가 있는 Directory |
| src/main.js | Vue 인스턴스를 생성하는 javascript 파일 |
| src/App.vue | Vue 애플리케이션의 가장 최상위 컴포넌트 |
| src/assets | 이미지 등 static assets이 모여 있는 Directory |
| src/components | Vue 컴포넌트들이 모여 있는 Directory |
| src/router.js | Vue Router로 설정한 라우팅 정보 |
| src/views | 화면을 전체 구성하는 View와 관련된 파일(라우팅과 관련된 컴포넌트들이 모여 있는 Directory) |
| test | 테스트 관련된 코드가 있는 Directory |
| babel.config.js | babel을 위한 설정 파일 |
| node_modules | yarn 또는 npm으로 설치한 의존성 모듈들이 있는 Directory |
| package.json | Vue 프로젝트의 메타 정보와 해당 프로젝트에서 사용하는 패키지(모듈)(의존성관련 정보)들의 정보가 저장되는 파일 |
| package-lock.json | node_modules(의존성 트리) Directory에 대한 모든 정보를 가지고 있는 파일 |