[Vue] - Vue 설치방법

Soozoo·2024년 9월 27일

Vue

목록 보기

2/23

설치에 앞서 왜 node.js에서 부터 설치해야되는지 알아보자

왜 Vue.js 설치 전에 Node.js를 설치해야 할까?

1. NPM(노드 패키지 매니저)을 사용하기 위해

Node.js에는 NPM(노드 패키지 매니저)가 내장되어 있습니다. NPM은 수많은 오픈소스 패키지를 쉽게 설치하고 관리할 수 있게 해 주는 도구입니다. Vue.js 생태계에서 가장 많이 사용하는 도구인 Vue CLI를 설치하려면 NPM이 필수입니다.

Vue CLI는 Vue 프로젝트를 쉽게 생성하고 관리할 수 있는 명령줄 도구입니다. 이를 통해 프로젝트 설정, 의존성 관리, 개발 서버 구동 등을 쉽게 처리할 수 있습니다. 또한, NPM을 통해 Vue.js 관련 패키지나 플러그인을 쉽게 설치하고 업데이트할 수 있습니다.

2. 프로젝트 관리 및 빌드 도구 사용

Vue 프로젝트를 만들고 운영하는 데 필요한 여러 빌드 도구들은 Node.js 기반으로 작동합니다. 예를 들어, Webpack이나 Vite 같은 도구는 Vue 파일을 번들링하고, 최적화하고, 여러 모듈을 결합하는 역할을 합니다. Node.js는 이 빌드 도구들이 원활하게 작동할 수 있는 환경을 제공합니다.

특히, 개발할 때 코드를 압축하고 성능을 향상시키는 과정을 자동으로 처리해주기 때문에 대규모 애플리케이션에서는 이러한 빌드 도구들이 매우 중요합니다.

3. 로컬 개발 서버 제공

Node.js는 로컬 개발 서버를 쉽게 구동할 수 있도록 도와줍니다. Vue CLI로 생성된 프로젝트는 Node.js 기반의 개발 서버에서 실행되며, 이 서버는 실시간으로 변경된 코드를 자동으로 반영해주는 Hot Module Replacement (HMR) 기능을 지원합니다.

HMR은 코드를 수정할 때마다 브라우저를 새로고침할 필요 없이 실시간으로 변경 사항이 반영되기 때문에 매우 편리합니다. Node.js가 없다면 이러한 개발 서버를 사용할 수 없으므로, Vue 프로젝트의 효율적인 개발이 어려워집니다.

4. 기타 도구 및 패키지 관리

Vue.js와 함께 자주 사용하는 ESLint나 Prettier 같은 코드 포매터나 Jest 같은 테스트 도구도 모두 Node.js 환경에서 실행됩니다. 이들 도구는 코드 품질을 관리하거나 테스트를 자동화하는 데 필수적이며, Node.js가 이들이 원활하게 동작할 수 있는 환경을 제공합니다.

결론

Vue.js를 설치하고 사용하기 전에 Node.js를 먼저 설치해야 하는 이유는 주로 NPM을 통한 패키지 관리, 빌드 도구 사용, 로컬 개발 서버 운영, 그리고 다양한 추가 도구 실행과 관련이 있습니다. Node.js는 Vue 개발 환경에서 필수적인 역할을 하기 때문에, Vue.js 프로젝트를 시작하려면 Node.js가 먼저 설치되어야 합니다.

Node.js 설치 과정

1.사이트로 이동

https://nodejs.org/en

사이트에 Download Node.js 클릭

설치가 완료 된 후 설치확인 하기 CMD

Vue.js 설치과정

Vue.js 파일 생성

vue create myapp
cd myapp
npm run serve 로 실행 확인

C:\IDE\Vue>vue create myapp

Vue CLI v3.0.0
? Please pick a preset: default (babel, eslint)

Vue CLI v3.0.0
✨  Creating project in C:\IDE\Vue\myapp.
⚙  Installing CLI plugins. This might take a while...

added 1363 packages, and audited 1364 packages in 32s

116 packages are looking for funding
  run `npm fund` for details

93 vulnerabilities (1 low, 64 moderate, 23 high, 5 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
🚀  Invoking generators...
📦  Installing additional dependencies...

added 52 packages, removed 2 packages, changed 18 packages, and audited 1414 packages in 5s

119 packages are looking for funding
  run `npm fund` for details

93 vulnerabilities (1 low, 64 moderate, 23 high, 5 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project myapp.
👉  Get started with the following commands:

 $ cd myapp
 $ npm run serve

C:\IDE\Vue>cd myapp

C:\IDE\Vue\myapp>npm run serve

> myapp@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 1978ms                                                                                                     오전 10:27:27       

  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.0.160:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.