vue 3 구성하기

vue는 node 기반입니다. node가 이미 있어야 합니다. node는 버전이 자주 올라가니 nvm과 같은 도구를 같이 활용하시는 것이 좋습니다. vue를 구성하기 전에 nvm이 없다면 nvm 먼저 구성해 보세요. 

우분투에서 nvm 설치하기 - Windows에서 nvm 설치하기

가장 먼저 vue를 활용하기 위해서 vue cli가 필요해요. vue cli를 설치하세요. vue cli에 대한 공식문서 참고해보면 좋습니다.

npm install -g @vue/cli

설치가 끝나면 vue 개발할 때 사용할 폴더로 이동해서 vue 프로젝트 생성 명령어를 실행합니다. 예제에서는 vue-project 폴더를 만들면서 프로젝트를 생성합니다.

vue create vue-project

Vue 버전을 선택하는 것이 나오는데 Vue3 버전 최신 버전을 선택합니다. 

패키지 매니저 선택화면이 나와요. 익숙한 npm으로 선택했는데 다른 것이 편하다면 다른 것을 선택해도 좋습니다.

vscode에서 열어보세요. vue 개발에 필요한 확장 프로그램 vetur을 설치합니다.

vutur 공식 문서에는 추가적으로 필요한 확장 프로그램을 안내하고 있어요.

Sass, language-stylus, ESLint

ext install Syler.sass-indented
ext install sysoev.language-stylus
ext install dbaeumer.vscode-eslint

각 사이트에 접속하면 명령어가 있어요. 명령어를 복사에서 ctrl + p를 누르고 입력하면 설치합니다.

설치가 끝나고 나서 ctrl + , 을 누르고 안내에 나오는 설정을 추가합니다. ctrl + , 을 누르고 나오는 설정화면에서 eslint.validate 검색하고 없으면 추가해 보세요.

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue"
]

jsconfig.json 파일을 열어서 내용을 추가하세요.

{
    "include": [
      "./src/**/*"
    ]
  }

타입스크립트 사용하는 경우에는 tsconfig.json 파일을 추가하세요. 처음에 사용하지 않을 수도 있는데 뭔지 모르겠다면 안 해도 되는 부분입니다.

 {
    "include": [
      "./src/**/*"
    ],
    "compilerOptions": {
      "module": "es2015",
      "moduleResolution": "node",
      "target": "es5",
      "sourceMap": true,
      "allowJs": true
    }
  }

npm run serve 명령어를 통해서 실행시키면 샘플 사이트가 나오는 것을 확인할 수 있을 것입니다.

npm run serve

vue cli 공식문서

vutur 공식 문서