Vue3 Project 생성 후 실행 시켜 확인하고 간단한 태그 추가 후 변경된 내용 확인
*Vue.js 관련 개념 설명은 아래 참고
*VScode 사용
*자세한 설명 생략
▷ Vue3 Project 생성 및 실행
① Vue Workspace folder 생성
② Vue3 Project 생성
*? Please pick a preset: Default ([Vue 3] babel, eslint)가 출력된다면 Enter
*Defalut Vue3
💡vue create test
③ 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 이랜서 블로그
Vue js는 자바스크립트 대표 프레임워크로, 사용자 인터페이스(UI) 개발에 초첨을 맞춰 복잡하고 동적인 웹 페이지를 쉽게 개발할 수 있는 개발 도구인데요. 어떤 특징과 이점이 있는지 이랜서와
www.elancer.co.kr
5. (VueJs) [Vue 3] - VSCode 사용해 Vue Js 개발 환경 구축 방법
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [방법 설명] 1. https://code.visualstudio.com/download 사이트 접속해서 VS CODE 다운로드 수행 및 설치 2. 설치된 VS CODE 가 정상 동작하는
kkh0977.tistory.com
▷ 관련 글
Vue3 기초 예제 프로젝트 정리
Vue3 기초 예제 프로젝트 구조 및 소스 중간 정리 *관련 글이 점점 늘어나 하나로 통합하기 위함 *이 글에서 만 싱크 맞춤 *주석 이외 설명 생략 *자세한 설명 생략 ▷ 프로젝트 전체 구조 < 파일 따
coding-today.tistory.com
'▶ Front-End > Vue.js' 카테고리의 다른 글
Vue3 기초 예제 - HTTP 통신(Axios) (2) | 2023.10.27 |
---|---|
Vue3 기초 예제 - Router(메뉴 네비게이션) (0) | 2023.10.26 |
Vue3 기초 예제 - Dynamic Select Box (0) | 2023.10.25 |
Vue 기초 예제 - Directive(조건/반복) (0) | 2023.10.23 |
Vue 설치 방법 (2) | 2023.10.20 |
댓글