Vue.js란?
- Javascript Famework 언어(React, Angular, Vue.js)중 하나이다.
- Evan You가 만든 언어이고 React와 Angular의 장점만을 모아서 만든 언어라고 한다.
- 발음 대로 View 화면을 만들기 위해 최적화된 프레임워크이다.
Vue.js 설치
1. node.js 설치
우선 Vue.js를 설치하기 전에 브라우저 환경이 아닌 곳에서 빌드하고 구동하기 위해
별도의 Runtime 환경을 제공하는 Node.js를 설치해야한다.
Node.js를 검색하여 사이트에 접속한 후 컴퓨터 개발 환경에 맞는 버전을 설치(.msi 파일)한다.
LTS버전과 최신 버전이 있지만 많이 사용하는 LTS 버전을 다운로드 하는 것을 추천한다.
필자는 회사에서 사용하는 개발 환경에 맞추기 위해 따로 v16.14.2을 다운로드 했다.
설치가 완료되면 .msi 설치 파일이 실행되고 Next버튼을 눌러서 설치하면 된다.
node.js를 설치하게 되면 자동으로 Npm Package Manager(npm)이 설치되게 된다.
NPM의 install 명령어를 통해서 원하는 패키지를 설치할 수 있게 된다.
명령어 작성은'npm install 설치패키지명' 또는 'npm i 설치패키지명'으로 입력후 설치할 수 있다.
설치된 패키지 서버를 실행시키는 것도 npm을 통해서 실행시킬 수 있다.
2. Vue.js 설치
Node.js가 설치됐다면 npm도 자동으로 설치됐을 것이다.
실행창에 cmd를 검색한 후 명령 프롬프트를 실행시킨 후
npm install vue 명령어를 입력하여 vue를 설치해준다.
Vue의 설치가 완료되면 Vue-cli도 설치해준다.
명령어는 npm install -g @vue/cli 이다.
Vue-cli란?
CLI(Command Line Interface)
- 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다.
- 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다.
- Vue의 기본 개발 환경을 설정해주는 도구이다.
- Vue-cli가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조나 lint, build, 또 어떤 라이브러리로 구성해야하는지 webpack 설정은 어떻게 해야하는지에 대한 고민을 덜어준다.
Vue.js가 제대로 설치되었는지 확인하기 위해
vue --version(또는 vue -V)명령어를 입력하여 설치된 버전을 확인한다.
3. Vue 신규 프로젝트 생성
이제 Vue.js를 사용하기 위한 설치가 끝났다.
다음은 Vue 신규 프로젝트를 생성하기 위해 cmd에서 원하는 경로로 이동한 후
vue create '프로젝트명' 명령어를 입력하여 원하는 경로에 프로젝트를 생성해준다.
vue create '프로젝트명' 명령어를 입력 후 Enter 키를 누르면 vue의 버전을 선택하는 화면이 나온다.
필자는 Vue에서 제공해주는 Vuetify를 사용하기 위해 Vue2 버전으로 설치하였다
현재 Vuetify는 Vue3에 대한 제약이 많다.
Vue 설치가 완료되면 아래와 같은 화면이 나온다.
cd '프로젝트 폴더명', npm run serve 명령어를 순서대로 입력해주면
8080(기본 포트)로 Vue 서버가 실행된다.
해당 URL(localhost:8080)을 입력해 사이트에 접속하게 되면 Vue의 기본 index.html 페이지가 출력된다.
이제 Vue.js의 설치가 완료되었다.
다음번에는 Spring boot와 Vue의 연결을 위한 설정 방법을 알아보겠다.
댓글