danbibibi
article thumbnail
Published 2023. 5. 14. 03:07
[Vue 기초 5] vue-cli/npm WEB/front-end

Nodejs 설치

  • Node.js를 설치하면 자동으로 npm이 설치되고, 이를 이용해서 @vue/cli를 설치
  • LTS 버전 설치

https://nodejs.org/ko

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

# 설치 확인
node -v
npm -v
npm(Node Package Manager)
- Node.js의 기본 패키지 관리자
- npm을 사용하여 다른 개발자가 작성한 패키지를 설치하고, 자신이 작성한 패키지를 배포 가능
- package.json 파일을 통해 패키지 정보 및 의존성 관리
npm 명령어
npm init : 새로운 프로젝트나 패키지를 만들 때 사용 (package.json 이 생성됨)
npm install package : 생성되는 위치에서만 사용 가능한 패키지로 설치
npm install -g package : 글로벌 패키지에 추가 (모든 프로젝트에서 사용 가능한 패키지로 설치)

 

@vue/cli 설치

  • CLI - Command Line Interface
  • Vue.js 개발을 위한 시스템으로 Vue.js에서 공식으로 제공하는 CLI
  • 개발의 필수는 아니지만 개발의 편리성을 위해 필수처럼 사용
  • Vue 프로젝트를 빠르게 구성할 수 있는 스캐폴딩을 제공
  • Vue와 관련된 오픈 소스들의 대부분이 CLI를 통해 구성이 가능하도록 구현되어 있음
npm install -g @vue/cli
vue -V # vue --version

 

@vue/cli 프로젝트 생성

vue create hello
cd hello
npm run serve

# @vue/cli 프로젝트 생성 후 별도 플러그인 설치
vue add router

# axios 추가
npm install axios

#package.json 파일의 dependencies 확인

'WEB > front-end' 카테고리의 다른 글

[Vue 기초 7] axios 비동기  (0) 2023.05.14
[Vue 기초 6] router  (0) 2023.05.14
[Vue 기초 4] Component  (0) 2023.05.14
[Vue 기초 3] Event, Binding  (0) 2023.05.05
[Vue 기초 2] Vue Instance 속성 (method, filter, computed, watch)  (0) 2023.05.04
profile

danbibibi

@danbibibi

꿈을 꾸는 시간은 멈춰 있는 것이 아냐 두려워하지 마 멈추지 마 푸른 꿈속으로