[vue.js] window 환경에서 vue.js 설치 및 환경설정

[개발환경]

 

1. 에디터 : vscode

2. 운영체제 : windows 10

3. 사전설치 프로그램 : npm / node.js (https://nm817.tistory.com/34?category=816335 참고)

 

[vue.js 설치]

 

1. npm / node를 이용한 vue cli 전역으로 설치

npm install -g @vue/cli

-g 는 로컬 어디에서든 vue-cli를 요청할 수 있도록 해주는 명령어다.

설치하는데 약간의 시간이 걸리며, vue-cli를 통해 vue.js 응용 프로그램을 만들 수 있다.

 

cli란 해당 프레임워크의 명령어를 통해 컴퓨터가 입력받아 출력해주는 명령어 인터페이스다.

vue.js framework를 개발하면서 편한 기능들을 제공해준다.

 

2. cli를 이용한 vue.js 앱 만들기

 

vue create my-app

cli 명령으롤 통해 my-app 이라는 vue framework를 설치하는 명령어다.

앵귤러의 경우 ng ~~ 라는 명령어로 실행하듯이, vue는 관련 cli명령들이 vue로 시작된다.

 

3. vscode extension 설치

vue VS code Extension Pack

vs code에서 vue.js 응용프로그램을 개발하기 위한 extension 들이 모여있는 pack extension이다.

주요 구성물

- Vetur : Vetur 확장 프로그램. vue.js 언어기능(구문 강조, InteliSense, Vue snippets, 서식) 등 제공

- npm Intellisense : npm module을 import 할 때 자동완성 기능을 제공

 

4. vue cli를 통한 vue.js 프로젝트 생성

vscode terminal 에서 vue cli 명령어 에러

vscode의 내장 터미널로 vue 프로젝트를 생성할 때 에러가 발생했다.. 일반 명령 프롬프트(cmd)로 하면 생성되는데, 원인을 모르겠다 ㅠㅠ 해결방법을 알면 알려주세요..

 

에러났던게 영 마음에 걸려서 알아봤는데, shell의 문제였다.

이유는 vscode에서는 ms사의 제품이라서, 기본적으로 터미널의 기본을 파웨셸(powerShell)로 한다는 것이다.

몽고DB를 할 때에는 powerShell을 많이 사용한다고 하는데, 당장 우리에게 필요한건 아니니 기본 터미널을 cmd로 바꿔주도록 하자.

 

방법은 vscode에서 Ctrl+Shift+P(팔레트 선택)을 누르게 되면 상단에 명령을 칠 수 있는 공란이 생기는데,

여기에 shell 이라고 입력하면 된다.

 

Step1. Ctrl+Shift+P > shell 입력

Step2. Command Prompt 선택

그럼 상단에 Select Default Shell 이라는 것을 선택해 주고, Commond Prompt를 선택한다.

이제 터미널의 default가 cmd가 된 것을 확인할 수 있다.

 

명령 프롬프트(cmd)에서 vue 프로젝트 생성(좌) 프로젝트 설정(우)

terminal에서 생성했을때는 에러를 뱉었는데, cmd에서는 정상적으로 패키지를 생성하였다.

명령어를 치게되면 우측 처럼 어떤 방식으로 설치할 것이냐고 물어보는데, 방향키를 이용하여

default (babel . eslint) 를 선택하여 생성해 준다.

Javascript를 브라우저 호환 ES5로 변환하고 ESLint 린터를 설치하여 코딩 오류를 감지해준다고

공홈에서 설명하니 얌전히 따라간다.

 

5. vue 프로젝트 실행

 

대망의 helloWorld 를 띄워볼 타이밍이 왔다.

설레는 마음으로 npm run serve 를 입력해준다.

 

명령어 : npm run serve

명령어 npm run serve 를 치고 node module이 package.json을 참고하여 프로젝트를 실행한다.

잠시후, Complied successfully in ~~ Local http://localhost:8080/ 이라는 메세지가 뜬다.

 

이제 원하는 브라우저를 열어서, 해당 주소 (http://localhost:8080/) 를 입력해주면 다음과 같은 화면을 볼 수 있다!

 

주소입력창이 http://localhost:8080 입력후 출력되는 화면

이제 vue.js 를 개발하기 위한 환경이 완료되었다.

 

vue.js를 컴포넌트를 불러들이고 재사용하는 방식의 프론트엔드 프레임워크 이다.

이제 하나하나 뜯어보면서 시행착오 겪으면서 맨땅에 헤딩을 시작할 차례다..

 

필자도 만들어진 vue.js환경에서 html코딩을 하여 vue개발자들에게 전달하는 방식으로 작업을 했던지라,

처음하는거나 다름이 없다...ㅎㅎ