Vue.js 3.x 설치

vue 설치 전에 vue가 설치되었는지 확인한다.

 

다음과 같이 Terminal에 vue --version 을 입력하였을 때 버전이 나타난다면 vue 가 설치되어있는 것이다.

만약 vue가 설치되어 있지 않다면 다음 명령어를 입력하여 vue를 설치한다.

여기서 -g란 글로벌로 설치한다는 옵션을 작성한 것이다. (해당 폴더 뿐만이 아니라 모든 폴더에서 사용하도록)

  

    
    
    
    
  
npm install -g @vue/cli

 

설치 완료 후 vue 프로젝트를 생성한다. (경로를 변경하고자 한다면 cd 명령어를 통해 변경하자)

  

    
    
    
    
  
vue create 프로젝트이름

프로젝트 생성 명령어를 입력하면 설치할 버전을 선택하는 메뉴가 나온다. 

기본값으로 설치해도 되지만 Manually select features를 선택해서 원하는 옵션을 추가할 수 있다.

프로젝트에서 필요한 Router와 Vuex를 선택 후 (Babel, Linter는 기본 옵션) Enter

3.0 버전 선택 후 history mode 사용은 y로 진행한다.

HTML5 히스토리 모드
vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다.
해시를 제거하기 위해 라우터의 history 모드 를 사용할 수 있습니다. history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있습니다.
https://v3.router.vuejs.org/kr/guide/essentials/history-mode.html

formatter 역시 기본값인 Standara config를 선택하고, Lint on Save(저장할 때만 vue 리로드)를 선택하고 마지막으로 설정파일을 개별파일로 다룰 것인지 json을 통해 패키지로 다룰 것인지 선택하면 되는데 In package.json을 선택한다.

 

지금까지 한 설정을 저장해서 다음에도 활용할 것인지 묻는데 이건 본인의 선택

선택 옵션 최종

 

 

프로젝트를 생성하면 다음과 같은 폴더가 생성된다.

 

VSCode 설정의 Defalut Formatter가 Prettier로 되어있을 경우 .prettierrc 라는 파일을 생성 후 다음의 내용을 작성한다.

  

    
    
    
    
  
{
   "semi" : false,
   "bracketSpacing" : true,
   "singleQuote" : false,
   "useTabs" : false,
   "trailingComma" : "none",
   "printWidth" : 80
}

 

 

vue를 실행하기 위해서는 먼저 프로젝트 파일로 경로를 변경해야 한다.

이후 npm run serve를 통해 vue를 실행시키면 된다.

실행하면 실행결과가 나타나게되고 주어진 url을 통해 생성된 vue 프로젝트를 확인할 수 있다.

 

-pagage.json : 프로젝트에 대한 정보(이름, 버전 등을 확인할 수 있다)

scripts: npm 명령어 단축어 정의

dependencies : 운영환경에서 필요한 모듈들

devDependencies : 개발하는 순간에 사용해야하는 모듈들

browserslist: 지원할 브라우저 설정