상세 컨텐츠

본문 제목

[ Vue.js ] 뷰 프로젝트 생성하는 방법 / How to Create Vue-Project

FrontEnd/Vue.js

by SangHoonE 2021. 9. 19. 22:08

본문

반응형

안녕하세요 상훈입니다.

Vue.js를 설치하였으면 이제 프로젝트를 생성해야합니다. 이때 프로젝트를 간단하게 생성하는 방법을 포스팅하겠습니다.

1. 프로젝트 폴더가 위치하고픈 디렉터리 위치로 이동합니다.

2. vue가 설치되어있는지 확인

 - 커맨드 창에 "vue" 라고만 작성해봅니다. (뷰 명령어를 사용할 수 있는지 확인)

 - 만약 설치가 안되어 해당 명령어는 존재하지 않는다 라는 에러문구가 뜬다면,

   아래의 포스팅↓↓↓으로 이동해주세요.

 

[ Vue.js ] 01. 뷰 설치하기 - vue cli 설치하는 방법

안녕하세요 상훈입니다. Vuejs를 설치하여 사용 할 수 있도록 vue js 설치하는 방법을 간단하게 명령어로 설명하도록 하겠습니다. $ npm install -g @vue/cli 이렇게 작성하시면 자동으로 설치가 완료 됩

code-hoon.tistory.com

vue 명령어가 원활하게 작성이 될 때의 명령어 작성 결과

3. vue 프로젝트 생성

$ vue create 프로젝트명

vue create 프로젝트명을 해주시면

vue create 프로젝트명을 입력했을 때의 결과

이렇게 나열됩니다. 이중에 Vue3, babel, eslint를 선택해주세요. 

*본인의 버전에 맞게 사용하시면 됩니다. 

 

 

 

설치 결과

 

친절하게도 웹페이지를 띄울 수 있게 해줍니다.

생성한 프로젝트로 이동하시고, npm run serve를 하면 

 

npm run serve 결과

웹페이지를 띄우고 localhost:8080 (**로컬호스트 8080포트) 로 접속이 가능하게됩니다.

 

 

 

결과 이미지.

 

이상입니다. 감사합니다.

 

 

관련글 더보기

댓글 영역