Vue3 Project 생성 및 실행

Vue3 Project 생성 후 실행 시켜 확인하고 간단한 태그 추가 후 변경된 내용 확인

*Vue.js 관련 개념 설명은 아래 참고

*VScode 사용

*자세한 설명 생략

 

 

▷ Vue3 Project 생성 및 실행

 

① Vue Workspace folder 생성

 

빈 폴더(Vue) 생성

 

② Vue3 Project 생성

*? Please pick a preset: Default ([Vue 3] babel, eslint)가 출력된다면 Enter

*Defalut Vue3

 

💡vue create test

Project 생성 완료

 

③ Vue3 Project  실행

*Vue3 Proeject 종료 : Ctrl + c → y 

 

💡cd test
💡npm run serve

 

④ 결과 확인

*http://localhost:8080

 

결과 화면

 

 

▷ Vue3 project import in VScode

*VScode에서 Vue project를 열면 volar plugin 설치를 권유(최초)

*volar :  구문 강조 표시(가독성 ↑)

 

<h1>Hello Vue.JS</h1>

태그 추가

 

추가된 부분 확인

 

 

▷ 참고

Vue js란, 프론트엔드 개발 시 Vue js를 선호하는 이유! I 이랜서 블로그

5. (VueJs) [Vue 3] - VSCode 사용해 Vue Js 개발 환경 구축 방법

 

 

▷ 관련 글

Vue3 기초 예제 프로젝트 정리