Vue.js 설치 방법

Vue.js 프로젝트를 시작하고 실행하는 것은 매우 간단합니다. 다른 자바 스크립트 프레임 워크와 마찬가지로 여러 가지 방법을 통해 Vue.js를 설치할 수 있습니다.

따라서이 튜토리얼에서는 시작하는 데 필요한 모든 단계를 다룰 것입니다.

CDN을 통해 Vue.js 설치

컨텐츠 전송 네트워크를 사용하면 HTML 스크립트 태그를 사용하여 프로젝트에서 Vue를 사용할 수 있습니다. 그것은 빠르고 쉽게 시작하고 실행할 수있는 방법입니다.

Vue가 npm으로 게시되는 순간 최신으로 유지되므로 사용하는 것이 권장되는 CDN은 https://unpkg.com/vue 입니다.

위의 줄에서 URL을 복사  하고 HTML 스크립트  태그 의 src 속성 으로 지정하기 만하면됩니다 .

<script src="https://unpkg.com/vue"></script>

이것은 페이지의 닫는 body 태그 바로 아래에 추가됩니다.

물론이 과정에서는 Node.js를 사용하기 때문에이 방법을 사용하지 않을 것입니다.

NPM을 통해 Vue.js 설치

노드 패키지 관리자 (NPM)를 사용하여 명령 줄을 통해 Vue를 설치할 수 있습니다. 이것은보다 견고한 프로젝트가 있거나 Vue를 통합하고자 할 때 존재합니다.

Node.js를 NPM과 함께 설치해야합니다. 이 버전이 설치되어 있는지 확인하려면 콘솔에 다음을 입력하십시오.

> node -v
> npm -v

이러한 각 명령을 실행하면 버전 번호가 제공됩니다. 인식되지 않으면 Nodejs.org 를 방문 하여 해당 OS에 적합한 소프트웨어를 설치 한 다음 명령 줄을 다시로드해야합니다. 위의 명령을 다시 입력하면 버전 번호가 생성됩니다.

명령 행을 통한 프로젝트 폴더에서 다음을 입력하여 Vue.js 패키지를 설치합니다.

> npm install vue --save

그러면 프로젝트의 node_modules 폴더에 Vue가 설치되고 package.json 파일에 종속 파일로 추가됩니다.

우리는이 방법을 프로젝트에 사용하지 않을 것입니다.

Vue CLI를 사용하여 Vue.js 설치

Vue Command Line Interface (CLI)를 사용하면 기본 스캐 폴딩을 사용하여 Vue 프로젝트를 빠르고 쉽게 시작할 수 있습니다. 라우팅 및 설정 등에 사용할 수있는 몇 가지 옵션을 제공합니다.

이것은 우리의 코스 프로젝트에 사용할 설치 방법입니다. 따라서 명령 줄에서 Vue CLI를 설치하여 시작합시다.

> npm install --global vue-cli

그러면 Vue CLI가 시스템에 전역으로 설치됩니다. --global  플래그 만 컴퓨터에 한 번 설치해야 보장합니다.

설치가 완료되면 vue를 사용하여 Vue CLI에 액세스 할 수 있습니다 . Vue CLI로 새 프로젝트를 시작하려면 다음과 같이 입력하십시오.

> vue init webpack compare-vue

• VUE
  우리는 함께 CLI 전화 VUE를 .
  
  
• init
  우리는 새로운 프로젝트를 시작하려고합니다.
  
  
• webpack
  자산을 처리하기위한 빌드 도구입니다.
  
  
• compare-vue
  프로젝트 이름입니다. 그것은 당신이 원하는 무엇이든 될 수 있습니다.

이 명령을 입력 한 후 Enter 키를 누르면 몇 가지 프롬프트가 표시됩니다.

? Project name: compare-vue
? Project description: A Vue.js project
? Author: Gary Simon <contact@designcourse.com>
? Vue build: standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "compare-vue".

   To get started:

     cd compare-vue
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

이 질문의 대부분은 간단하지만 Vue 빌드  는 두 가지 옵션을 제공합니다.이 옵션은 독립형 권장 버전을 선택했습니다. 

우리는  프로젝트에서 홈 페이지와 FAQ 페이지를 가지고 있기 때문에 vue-router 를 설치하기를 원합니다 .

나는  우리의 발을 축축하게하는 빠른 프로젝트이기 때문에 다음 3 가지 질문에 대해 아니오 를 선택했습니다 . 우리는 테스트를 linting하거나 코딩 할 필요가 없습니다. 이 프로젝트가 심각한 프로젝트라면 이러한 옵션을 사용하는 것이 좋습니다.

다음으로 우리는 새로운 프로젝트 폴더로 이동하여 npm  을 실행 하여 package.json에서 패키지를 설치해야합니다.

> cd compare-vue
> npm install

끝나면 갈 준비가되었습니다! 이제 다른 명령을 실행하여 프로젝트를 실행하면 브라우저에 실시간으로 표시됩니다. 다음과 같은 특정 파일을 변경하면 브라우저가 자동으로 다시 빌드되고 다시로드됩니다.

> npm run dev

새로운 Vue.js 프로젝트가 만들어졌습니다.http : // localhost : 8080