240325 Vue 해보기

Node.js 설치하기

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

설치 후 CMD 창 열기

npm --version

 

 

Vue 의 CLI 버전을 설치

npm install -g @vue/cli

Vue 의 CLI 버전 설치하기

 

npm 버전 업그레이드 하기

npm install -g npm@10.5.0

npm 의 더 높은 버전을 설치

 

이후 설치된 npm 과 Vue 의 버전 확인하기

npm --version
vue --version // vue -V

npm 과 Vue 가 제대로 설치된 모습

 

과연 npm 이란 무엇일까? 확인해보자

https://namu.wiki/w/npm

npm

 

원하는 폴더에 vue 설치하기

나는 C 드라이브 > vue 폴더 안에 설치하기, CMD 창에서 진행

cd c:/vue

vue create vue-app

Vue 3 버전을 설치 진행

 

이후 vue 실행해보기

npm run serve

Vue 가 실행된 모습, 해당 주소로 접속 시 Vue 페이지를 볼 수 있음

 

해당 주소로 접속 시 보이는 페이지

 

VS Code 로 vue 폴더 열어보기

vue 를 설치한 vue - app 폴더 열어서 내용 확인해보기

 

App.vue 의 설명

 

template 은 html 에 찍을 내용

script 는 스크립트 내용, 불러 올 페이지를 import 하여 사용

style 은 해당 내용의 스타일을 지정

 

한 파일 안에 html, script, css 를 넣음

서버 종료하기

Ctrl + C 를 누르고 Y 를 누르면 서버가 꺼진다는데,,

 

난 왜 안될까

 

껏다 키니까 된다

---