Vue Cli 프로젝트 생성 및 실행하기

window10, vscode 환경.

이번 포스팅에서는 vscode의 터미널창을 이용해 vue cli 프로젝트를 생성하는 방법을 정리하려고 한다.
node와 vue cli가 깔려있다는 전제하에 진행하지만 혹시 설치가 안되어있다면 아래를 참고하면 될 것 같다.

*아래 링크는 같은 node.js 바탕의 프레임워크인 React 프로젝트를 진행하면서 작성했던 포스팅인데 node.js 설치 전이라면 아래 글을 참고해서 설치하면 된다.

[React] 리액트 시작하기. node.js설치 및 웹팩으로 프로젝트 생성

*vue cli가 설치되지 않았다면 아래 명령어로 설치할 수 있다.

npm install -g @vue/cli

** 혹시나 본인 컴퓨터에 node 또는 vue가 설치되어있는지 잘 모르겠다면 터미널창에 아래 명령어를 검색해 확인할 수 있다.
- 노드 버전 확인

node -v

- 뷰 버전 확인

vue --version

 

1. vue cli 프로젝트를 생성하고자하는 폴더로 경로 이동

vue cli 설치의 경우 내가 만들고자 하는 프로젝트가 폴더째로 자동생성되기 때문에 빈폴더를 따로 만들필요는 없다.(React의 CRA설치의 경우 프로젝트용 폴더를 만들어야함, 예를들면 깃허브 프로젝트를 소스트리로 클론받을때 새로만든 빈폴더내에 클론 받는 것처럼...)

나는 work폴더에 프로젝트들을 관리하고 있어서 이폴더에 설치했다.

설치할 폴더 경로를 이렇게 복사해서 아래 터미널창에 cd 하고 붙여넣기 한 뒤 엔터!

728x90

2. vue create 프로젝트명 으로 vue cli 프로젝트 생성하기

vue create chartjs

나는 chartjs라는 이름의 프로젝트를 만들었다.
vue create 뒤에 본인이 만들고자하는 프로젝트명을 넣어주면 된다.

얼마전에 회사에서 진행한 프로젝트에서 chartjs 라이브러리를 다양하게 커스텀해서 사용했는데 겸사겸사 차트 라이브러리 사용법도 정리해보려고 이렇게 만들었다는 tmi...ㅋㅋㅋㅋㅋㅋ

그러면 아래처럼 어떤 옵션으로 프로젝트를 생성할지 물어본다
두번째 default (Vue 3) ([Vue 3] babel, eslint)로 선택했다

babel은 자바스크립트 버전을 맞춰주는 번역기라고 보면 되고 eslint는 코드 자동정렬이라고 생각하면 된다

이렇게 열심히 프로젝트가 생성되기 시작하고 잠시뒤에 Successfully created project chartjs 가 뜬다

빨간 글씨로 뭔가 위험요소가 있다고 알려주는데 위 설명처럼 npm audit fix 명령어를 실행해줘도 되고 사실 그냥 무시해도 프로젝트는 실행된다.

3. Vue CLI 프로젝트 실행하기 npm run serve

탐색창에 프로젝트를 설치했던 경로로 가면 아래처럼 내가 설치한 vue cli 프로젝트가 정상적으로 만들어진 것을 확인할 수 있다.

그럼 내 프로젝트 경로로 들어가서 npm run serve로 프로젝트를 실행한다.

cd chartjs

npm run serve

파란색 링크를 Alt + 클릭하거나 인터넷창에 localhost:8080 검색해서 들어가면 아래처럼 기본 vue 프로젝트 페이지가 실행되는걸 확인할 수 있다

참고로 이 화면은 src > components>HelloWord.vue 파일을 보여주고 있다.

반응형

여기서 <template>태그 바로 안에 있는 div를 제외하고 안의 내용물(3줄 ~ 29줄 까지)을 싹 지운뒤 HelloWord만 남기면...

화면에 아래처럼 HelloWorld만 보인다

참고로 vue cli 기본 프로젝트의 구조를 보면 main.js에 연결된 App.vue파일을 화면에 보여주고 있는데 이 App.vue파일에 HelloWorld.vue 컴포넌트가 포함되어있는 것이다.
그래서 App.vue 파일을 보면

이렇게 Vue logo가 있어서 화면에 로고가 보이는 것이다. 그래서 이미지태그인 2번째 줄까지 지워버리면 화면에는 깔끔하게 HelloWorld.vue컴포넌트에서 작성했던 HelloWorld라는 글자만 보이게 된다

뷰는 써본지 오래되지는 않았지만 대략적인 사용법은 쉽게 익힐 수 있을정도로 굉장히 직관적인 프레임워크인것같다. 원래 리액트를 더 열심히 파보려고했는데 회사에서 주로 뷰로 작업하기때문에 앞으로 뷰 관련 포스팅을 주로 하게 될것같다(게을러서 그것마저 잘 할지는...ㅠ;)

아마도 이 글을 검색해보는 분들도 뷰를 이제 막 배우는 단계이신 분들이 많을 것 같은데 즐코하세요!!👍 화이팅!!