vue-cli(v5) 설치 및 프로젝트 구조 정리

목차

1. VueJS 설치
2. 프로젝트 생성
3. 프로젝트 구조

---

1. VueJS 설치

 

VueJS를 설치하는 방법은 두 가지인데요, vue를 직접 설치하거나, @vue/cli를 설치하는 방법입니다.

 

두 방법의 차이는 다음과 같습니다.

• vue: VueJS를 직접 설치하는 방법으로, 간단하고 빠른 방법이지만 프로젝트 세팅을 직접 해야 합니다.
• @vue/cli: 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다.
  • https://simplevue.gitbook.io/intro/01.-vue-cli

 

아래 명령어로 vue-cli를 설치할 수 있습니다.

npm i -g @vue/cli

---

2. 프로젝트 생성

 

1) 프로젝트 생성

vue create test

 

2) 프로젝트 프리셋 선택

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
❯ Manually select features

• 방향키로 커서 이동
• 엔터로 확인

 

3) 프로젝트에서 사용할 기능 선택

스페이스바: 기능 선택

엔터 키: 확인

 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

• Babel: 빌드 시 프로젝트 내 ES5 이후의 문법을 ES5로 변환
• TypeScript: 타입스크립트 사용
• Progressive Web App(PWA): https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
• Router: Vue-Router 설치
• Vuex: 상태 관리 라이브러리인 Vuex 설치
• CSS Pre-processors: Sass 사용을 위한 전처리기 패키지 설치
• Linter / Formatter: 코딩 컨벤션 관련 패키지 설치
• Unit Testing: 단위 테스트에 필요한 패키지(Mocha + Chai or Jest) 설치
• E2E Testing: 종단 간 테스트에 필요한 패키지 설치, Cypress (Chrome only) / Nightwatch (WebDriver-based) / WebdriverIO (WebDriver/DevTools based) 중 선택

 

4) Choose a version of Vue.js that you want to start the project with (Use arrow keys)

프로젝트에서 사용할 Vue.js의 버전을 선택

❯ 3.x
  2.x

 

5) Use class-style component syntax?

클래스 기반 컴포넌트를 사용 여부 입력

N

• 컴포넌트 선언 시 클래스 기반 API를 선호하는 경우 vue-class-component 데코레이터 사용 여부 (참고 : https://class-component.vuejs.org/)

 

6) Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?

TypeScript에 Babel을 같이 사용할지 여부 입력

Y

 

7) Use history mode for router? (Requires proper server setup for index fallback in production)

history 모드 사용 여부 입력

Y

• Hash Mode vs History Mode: https://happy-coding-day.tistory.com/entry/Vue-vue-router%EC%97%90%EC%84%9C-Hash-Mode-Vs-History-Mode-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

8) Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

CSS 전처리기 선택

❯ Sass/SCSS (with dart-sass)
  Less
  Stylus

 

9) Pick a linter / formatter config: (Use arrow keys)

linter / formmater 설정 선택

  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier

• ESLint + Standard config로 설정하면 npm install 사용 시 의존성 오류가 발생합니다.

 

10) Pick additional lint features

lint 실행 시점 선택

 ◉ Lint on save
 ◉ Lint and fix on commit

 

11) Where do you prefer placing config for Babel, ESLint, etc.?

Babel, EsLint 같은 config 파일을 따로 관리할 것인지, package.json에서 같이 관리할 것인지 선택

❯ In dedicated config files
  In package.json

 

12) Save this as a preset for future projects?

현재 설정을 프리셋으로 저장할지 여부 입력

N

---

3. 프로젝트 구조

 

• /node_module: 설치된 패키지 파일들
• /public: 정적 파일(이미지, 영상 등) 보관 폴더, webpack의 처리를 받지 않음
• /src: 전체 소스 파일
  • /assets: css/img 등의 정적 파일 보관, webpack의 처리를 받을 수 있어 css-preprocessor 사용 가능
  • /components: 컴포넌트 파일들
  • /router: Vue-Router 관련 폴더
  • /store: Vuex 관련 폴더
  • /views: 라우터 페이지 관련 폴더
  • App.vue: 프로젝트 최상위 컴포넌트 파일
  • main.ts: 프로젝트 entry ts 파일
  • shims-vue.d.ts: TypeScript가 .vue 파일에 대해 어떻게 이해할지를 정의
    • https://stackoverflow.com/questions/54622621/what-does-the-shims-tsx-d-ts-file-do-in-a-vue-typescript-project
• .eslintrc.js: ESLint 설정 파일
• .gitignore: git이 특정 파일을 추적하지 않도록 설정
• babel.config.js: Babel 설정 파일
• package.json: 프로젝트 패키지 설정
• tsconfig.json: TypeScript 설정

---

참고

• https://velog.io/@kdeun1/Vue-3-Composition-API-TypeScript-Vuex-4%EB%A1%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0