Vue.js single file components 방식으로 개발해보기 02 - Vue Project 시작, 페이지 띄워보기

Vue.js single file components 방식으로 개발해보기 02

 

Vue Project 시작, 페이지 띄워보기

Vue.js 페이지 브라우저에서 열어보기

실행 할 프로젝트 폴더를 생성하거나 선택하여 에디터에서 열어줍니다.

- 이 폴더에 vue.js를 다운로드 받아 사용할 것입니다.

저는 vue 폴더를 만들어서 VScode에서 Open Folder 했습니다.

프로젝트 폴더

vscode에서 open folder

에디터에서 cmd 창을 열어줍니다.

- VScode 에디터의 단축키는 [ctrl + `] 인데, 에디터마다 다르므로 검색은 필수 입니다.

(기본으로 cmd를 제공하지 않는 에디터는 플러그인이 있을 듯 합니다.)

VS Code 에디터의 캡쳐본이며, 빨간 테두리 부분이 cmd창 입니다.

cmd창을 자세히보면 [ PS C:\Users\사용자명\Desktop\vue > ] 라고 되어있는데, 이것은 자신의 폴더 구조입니다.

마지막에 적혀 있는 vue가 프로젝트 폴더명이며 cmd창이 열린 지점입니다.

 

구조가 다르다면 cmd가 다른 곳을 바라보고 있는 부분입니다.

cmd가 Desktop을 보고 있습니다.

Desktop (바탕화면) 에서 끝났으면 cmd 창은 바탕화면을 바라보고 있다는 뜻입니다.

Desktop에서 명령어를 입력할 경우 명령어를 수행하는 대상은 프로젝트 폴더인 vue가 아니라 바탕화면이 됩니다.

 

vue.js를 npm을 통해 다운로드 합니다.

vue 폴더를 대상으로 오픈된 cmd창에 명령어를 입력합니다.

npm install vue

npm을 통해 vue를 install 명령어를 입력해줍니다.

 

*만약 ‘npm’은 내부 또는 외부 명령 실행 할 수 있는 프로그램, 또는 배치 파일이 아닙니다와 같은 에러가 날 경우

install 명령어가 완료되면 node_modules폴더와 package-lock.json 파일이 확인됩니다.

그리고 node_modules 폴더를 열어보면 하위에 vue 폴더가 다운로드 된 것을 확인 할 수 있습니다.

 

vue의 개발 환경을 쉽게 설정하기 위해, vue-cli 모듈을 npm을 통해 다운로드합니다.

vue-cli 란 무엇인가?

vue 개발 환경을 설정해주는 도구 입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다.

출처 : 블로그 링크

 

즉, 프로젝트를 쉽게 진행하기 위해 다운로드를 진행합니다.

 

cmd창에 명령어를 입력합니다.

npm install -g vue-cli

여기서 -g는 global의 g이며 -g대신 --global을 입력해도 됩니다.

vue cli의 명령어를 입력하기 위해서는 글로벌로 설치를 해야한다고 합니다.

 

vue 프로젝트 설정입니다.

cmd창에 명령어를 입력합니다.

vue init webpack-simple

vue init은 vue-cli 모듈의 프로젝트 시작 명령어이며 webpack-simple은 모듈에서 지원하는 템플릿의 종류입니다.

 

webpack-simple 템플릿이란?
웹팩 최소 기능을 활용한 프로젝트 구성 방식으로 빠른 화면 프로토타이핑용으로 사용됩니다.
그외에 지원 템플릿 종류는 더 있으므로 참고 링크로 들어가서 가능합니다.
참고https://blog.hanumoka.net/2018/08/22/vue-20180822-vue-Vue-CLI/

 

명령어를 입력한 후에는 프로젝트 설정에 대한 질문들이 줄줄이 나옵니다.

이 질문들에 대한 답변은 package.json에 저장됩니다.

 

첫번째 질문 이후에는 엔터만 계속 치고 넘어가도 기본으로 설정되는 부분들이 있기 때문에 init을 완료 할 수 있습니다.

 

질문으로 나오는 항목

(1) 현재 디렉토리에서 실행 여부, y를 등록해줘야 진행이 가능합니다.

(2) 프로젝트 이름, (3) 프로젝트 설명은 설정을 안 할 경우 기본 값으로 저장됩니다.  

(4). 작성자는 설정을 안 할 경우 package.json 파일에 저장되지 않습니다.

(5). 소프트웨어 라이센스 설정을 안 할 경우 기본 값으로 저장됩니다.

(6). sass 사용 여부, 현재 예제들에서는 sass를 사용하지 않으므로 n를 입력합니다.

 

질문 등록을 마치게 되면 로딩이 진행되고 아래와 같이 명령어가 나옵니다.

그리고 폴더를 확인해보면 아래와 다운로드 된 파일들이 보입니다.

위 다운로드 된 파일을 간단한 설명입니다.

.babelrc	babel에 대한 설정을 하기 위한 파일
.editorconfig	코딩 스타일을 일관적으로 유지하기 위한 설정 파일
.gitignore	프로젝트를 git에 올릴 때 파일들의 제외를 설정할 수 있는 파일
index.html	npm 모듈을 통해 프로젝트를 배포할 때 vue의 태그들을 HTML, CSS, JS로 변환시켜 연결 시킬 때 사용하는 index 파일
package-lock.json	파일의 의존성 트리에 대한 정보를 모두 가지고 있는 파일
package.json	프로젝트 정보, 의존성을 관리하는 파일이며 node_modules 폴더의 정보를 가지고 있다. init 할 때 등록한 프로젝트 정보 여기에 저장(하단 캡쳐)
README.md	git에 각 저장소 생성시 프로젝트에 대한 설명을 적는 마크다운 언어 파일
webpack.config.js	웹팩 모듈 관련 설정 관리하는 파일

 

package.json

로컬 서버에 vue 페이지 띄우기

vue init 명령어가 끝나고 나서 cmd 창을 보면 아래와 같이 To get started로 해서 2개의 명령어가 나오게 됩니다.

명령어 들을 순서대로 실행해보겠습니다.

cmd 창에 명령어를 입력합니다.

npm install

설정에 등록된 모듈들을 다운로드 해주는 부분이며 다운로드가 완료된 후에 다음 명령어를 입력해줍니다.

npm run dev

명령어 실행이 끝나면 브라우저 창이 자동으로 열리게 됩니다.

 

브라우저가 열리지 않으면 브라우저에서 localhost:8080를 url로 입력해 줍니다.

 

localhost:8080

이렇게 localhost에 서버를 띄워서 vue 컴포넌트 페이지를 열었습니다.

 

과연 저 브라우저가 내 폴더의 소스를 바라보는 것인가를 알아보기 위해 소스 수정 후 테스트를 진행해보겠습니다.

* 프로젝트폴더 > src > App.vue

<template> 태그 사이에 있는 태그들을 다 지운 후 아래와 같이 작성해보겠습니다.

<template>    <h1>Vue.js 개발 테스트</h1> </template>

 

그 후 브라우저를 확인해보면 아래와 같이 변경 된 것을 확인 할 수 있습니다.

html 결과 이미지

브라우저의 새로고침 없이도 변경된 모습이 확인 가능한데, 그 이유는 프로젝트 구성 시에 자동으로 설치된 vue-hot-reload-api 때문입니다.

이 모듈은 페이지가 다시 로드되지 않아도 자동으로 수정된 부분을 리로드 시켜줍니다.

 

서버 죽이는 방법은 단축키로 [ctrl + c] 후에 y를 눌러주는 방법과 cmd창에서 kill terminal 시키는 방법이 있습니다.

에디터 내에 저런 이모티콘 클릭(kill terminal)

 

vue 다운로드부터 브라우저 오픈까지의 명령어를 압축한 부분입니다.

cmd 창에 명령어를 입력합니다.

npm install vue npm install -g vue-cli npm init webpack-simple npm install npm run dev