Vue.js 초기설정

vue-cli 설치

cli란 vue의 개발 환경을 설정해주는 도구이다.

( 먼저 npm을 설치해준 다음에 한다. )

npm install -g @vue/cli

• 이렇게 적어주면 vue-cli의 최신버전이 깔린다.
• 만약 버전을 지정해서 설치하고싶다면 아래와 같이 적어주면 된다.

npm install -g @vue/cli@{내가 설치하고 싶은 버전}

설치 옵션은 사람마다 다르니 잘골라서 선택한다.

npm run serve

• 코드가 실행된다.

※ 서비스 종료는 Ctrl - c로 종료시킬 수 있다.

---

Build

vue 파일을 html과 javascript코드로 변환해야 Nginx에서 서비스가 가능하다.

npm run build

• /dist 폴더가 생성된다.

※ 생성된 dist폴더의 파일만으로 Nginx에서 서비스 할 수 있다.

→ *.vue파일은 사용하지 않는다.

---

VS Code 확장자 설치

• Vetur: vue파일의 코드 색깔을 처리해준다.
• ESLint: ESLint를 처리해준다.
• Vue VSCode Snippets: vue에 대한 snippet를 지원한다.

※ VS Code에서는 나만의 snippet을 만들어 사용할 수 있다.