>  기사  >  웹 프론트엔드  >  nodejs 스캐폴딩 vuecli 설치 방법

nodejs 스캐폴딩 vuecli 설치 방법

PHPz
PHPz원래의
2023-04-26 09:10:10687검색

Node.js는 서버 측에서 JavaScript를 실행할 수 있는 경량 JavaScript 런타임 환경으로, 개발자는 서버 측 프로그래밍에 JavaScript의 프로그래밍 기능을 활용할 수 있습니다. Vue.js는 사용하기 쉽고 효율적이며 유연한 인기 있는 프런트 엔드 프레임워크로 모바일 및 PC 웹 개발에 널리 사용됩니다.

Vue.js를 보다 편리하게 웹 개발에 사용할 수 있도록 Vue.js에서는 Vue CLI(Vue Command Line Interface)라는 스캐폴딩 도구를 제공합니다. Vue CLI는 개발자가 Vue.js 애플리케이션을 신속하게 구축하는 데 도움이 되는 구축, 실행 및 패키징 기능을 포함하는 표준화된 도구 체인을 제공합니다.

이 글에서는 Node.js와 Vue CLI를 설치하고 기본 Vue.js 애플리케이션을 만드는 방법을 소개합니다.

Node.js 설치

Vue CLI를 사용하려면 먼저 Node.js를 설치해야 합니다. Node.js는 공식 홈페이지(https://nodejs.org/)에서 다운로드할 수 있습니다.

시스템에 따라 다운로드할 해당 버전을 선택하세요. 설치가 완료된 후 명령줄 창을 열고(Windows 사용자) 다음 명령을 입력하여 Node.js가 성공적으로 설치되었는지 확인하세요.

node -v

버전 번호가 of Node.js가 반환되면 Node.js가 성공적으로 설치되었음을 의미합니다.

Vue CLI 설치

Vue CLI는 npm을 통해 설치할 수 있습니다. npm은 공개 npm 저장소에서 다양한 JavaScript 패키지와 도구를 다운로드하고 설치할 수 있는 Node.js용 패키지 관리자입니다.

Vue CLI를 설치하려면 명령줄 창에 다음 명령을 입력하세요.

npm install -g @vue/cli

이 명령은 Vue CLI를 전역 환경에 설치하며 어디에서나 사용할 수 있습니다.

Vue.js 애플리케이션 생성

Vue CLI를 설치한 후 이를 사용하여 Vue.js 애플리케이션을 생성할 수 있습니다.

기본 Vue.js 애플리케이션을 생성하려면 명령줄 창에 다음 명령을 입력하세요.

vue create my-project

그 중 my-project는 프로젝트 이름으로 필요에 따라 수정할 수 있습니다.

이 명령을 실행하면 Vue CLI는 다음을 포함한 몇 가지 다른 옵션을 제공하는 사전 설정을 선택하라는 메시지를 표시합니다.

  • Default(Babel, CSS)
  • Default(Babel, PostCSS, ESLint)
  • Default(TypeScript)
  • 기본값(TypeScript, ESLint)
  • 수동으로 기능 선택

이 사전 설정은 Babel, PostCSS, ESLint 등 일반적으로 사용되는 일부 옵션을 자동으로 구성합니다. 기본 애플리케이션만 필요한 경우 기본 옵션을 선택할 수 있습니다.

Vue CLI는 필요한 모든 패키지와 종속성을 다운로드하고 기본 Vue.js 애플리케이션을 생성합니다.

Vue.js 애플리케이션 실행

Vue.js 애플리케이션을 생성한 후 실행할 수 있습니다. 명령줄 창에서 프로젝트 디렉터리로 이동하여 다음 명령을 입력합니다.

cd my-project
npm run serve

이렇게 하면 로컬 개발 서버가 시작됩니다. 이 서버는 http://localhost:8080의 브라우저에서 볼 수 있어 애플리케이션을 볼 수 있습니다.

요약

Node.js와 Vue CLI는 모두 개발자가 Vue.js 애플리케이션을 빠르게 구축하는 데 도움이 되는 매우 강력한 도구입니다. 이 문서에서는 Node.js와 Vue CLI를 설치하고 기본 Vue.js 애플리케이션을 만드는 방법을 보여줍니다. 이 글이 여러분이 Vue.js를 웹 개발에 더욱 편리하게 사용하는 데 도움이 되기를 바랍니다.

위 내용은 nodejs 스캐폴딩 vuecli 설치 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.