[Vue] VS Code에 Vue 프로젝트 생성

2023. 9. 22. 15:07·2023-02 몰입형 SW 정규 교육
728x90

Vue 프로젝트를 생성하기 위해서는 먼저 Node js와 npm이 설치되어 있어야 합니다.

 

 

Node.js 설치하기 (18.17.1 LTS)

제가 사용할 Node.js 버전은 18.17.1 LTS 입니다. 먼저 아래 사이트에 접속한 후 https://nodejs.org/ko/blog/release/v18.17.1 Node v18.17.1 (LTS) | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.or

zero-talk.tistory.com

 

 

1. 터미널에(ctrl + shift + `) Vue 설치 명령어를 입력합니다.

 

npm install -g @vue/cli

 

2. vue --version 명령어로 vue가 제대로 설치됐는지 확인합니다.

 

vue --version

 

vue --version

 

3. vue-cli을 사용하여 vue 프로젝트를 생성합니다.

 

vue create 프로젝트명

 

4. Vue 버전을 선택하는 메세지가 뜨는데 저는 Vue3를 사용할 것이기 때문에 Vue3를 골랐습니다.

Manually는 필요 라이브러리를 선택할 수 있는 창이 뜹니다.

 

 

5. 설치가 완료되면 아래 사진과 같이 프로젝트에 필요한 파일들이 자동으로 생성됩니다.

 

 

6. npm run serve 명령어를 입력해 npm 서버를 실행하여 제대로 실행되는지 확인합니다.

 

npm run serve

 

 

url을 ctrl + 마우스 좌클릭하면 아래와 같은 화면을 보실 수 있습니다. 종료는 ctrl + c입니다.

 

728x90
저작자표시 비영리 변경금지

'2023-02 몰입형 SW 정규 교육' 카테고리의 다른 글

[Spring] 이클립스(eclipse) XML 기반 세터/생성자 주입 (setter/constructor)  (1) 2023.10.23
[Spring] 이클립스(eclipse) 자바 스프링 프로젝트 생성 방법  (0) 2023.10.23
HTTP 상태 코드 100 ~ 500  (0) 2023.09.21
Get, Post 차이점 및 한글 처리 방식  (0) 2023.09.21
[JSP] JSP 지시어(Directive), 액션 태그(Action Tag)  (0) 2023.09.21
'2023-02 몰입형 SW 정규 교육' 카테고리의 다른 글
  • [Spring] 이클립스(eclipse) XML 기반 세터/생성자 주입 (setter/constructor)
  • [Spring] 이클립스(eclipse) 자바 스프링 프로젝트 생성 방법
  • HTTP 상태 코드 100 ~ 500
  • Get, Post 차이점 및 한글 처리 방식
gxxg
gxxg
함께 일하고 싶은 개발자를 꿈꾸는 예비개발자의 공부 기록
  • gxxg
    공공
    gxxg
  • 전체
    오늘
    어제
    • 분류 전체보기 (138)
      • ☁️ 구름 x 카카오 Deep Dive 풀스택 (7)
        • html, css (1)
        • Java (3)
        • 스프링 MVC (0)
      • 💻 코딩테스트 (89)
        • 백준 (2)
        • programmers (87)
      • SQLD (1)
      • Language (3)
        • Java (2)
        • JavaScript (1)
      • Style Sheet (0)
        • CSS (0)
        • SCSS & SASS (0)
      • DBMS (2)
        • Oracle (2)
        • MySQL (0)
        • postgresql (0)
        • 데이터베이스 기초 이론 (0)
      • React (0)
      • SpringBoot (0)
      • JSP (2)
      • 알고리즘 (0)
      • 2023-02 몰입형 SW 정규 교육 (24)
        • 9월 프로젝트 (8)
      • 벽돌깨기 (4)
      • Etc (4)
  • 블로그 메뉴

    • 홈
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    programmers
    구현체
    javascript
    회원 관리 시스템
    Lv0
    Lv2
    자바
    springboot
    프로젝트 구조
    코딩테스트
    2단계
    POST
    JSP
    3단계
    java
    spring
    오블완
    자바스크립트
    프로그래머스
    eclipse
    0단계
    CSS
    HTML
    DFS
    이클립스
    junit 테스트
    티스토리챌린지
    톰캣
    LV3
    코테
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
gxxg
[Vue] VS Code에 Vue 프로젝트 생성
상단으로

티스토리툴바