2018 년 Vue.js가 인기를 얻고 있으며이 페이지에 착수 한 경우이 강력한 JavaScript 프레임 워크를 사용하는 방법을 배우기 시작할 가능성이 있습니다.
이 튜토리얼에서 Vue.js 2를 실행하고 실행하는 방법을 정확하게 보여 드리겠습니다. Vue를 설치할 수있는 방법은 여러 가지가 있으며 모두 살펴 보겠습니다.
CDN을 간단하게 참조하는 방법, NPM (노드 패키지 관리자)을 사용하여 기존 프로젝트에 통합 한 다음 Vue CLI를 사용하는 방법이 있습니다.
CDN을 통해 Vue 설치
Vue를 설치하는 가장 쉽고 빠른 방법은 CDN (Content Delivery Network)을 통해 Vue를 <script> 태그 에 직접 포함시키는 것 입니다. 즉, 자신의 서버에있는 Vue 대신 별도의 서버에서 배달됩니다. 기술적으로이 시나리오에서는 Vue를 설치하지 않습니다. 단순히 Vue 참조를 작성하기 만하면됩니다.
이 방법을 사용하려면 명령 행이나 콘솔을 열고 새 폴더를 만드십시오.
> mkdir vue-cdn && cd vue-cdn코드 편집기를 열고 다음 내용으로 index.html 파일을 만듭니다 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue CDN</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</body>
</html>브라우저 에서이 index.html 파일을보고 Chrome에서 ctrl-shift-i 콘솔을 보면 다음과 같은 메시지가 표시됩니다.
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:8436 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html이것은 Vue가 통합되었고 당신이 흔들릴 준비가되었음을 의미합니다. 이를 증명하기 위해 매우 간단한 Vue 앱을 만들 수 있습니다.
index.html로 돌아가서 body 태그 내에서 다음과 일치하도록 업데이트하십시오.
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>브라우저를 새로 고침하면 Hello Vue! 가 표시됩니다 . 이것은 Vue가 작동하고 있음을 의미합니다.
그러나이 과정과 프로젝트 전반에서이 방법을 사용하지 않을 것입니다. 방금 만든 / vue-cdn 폴더 를 삭제하십시오 .
NPM을 통해 Vue 설치
NPM (Node Package Manager)은 패키지를 설치하는 데 사용됩니다. 이 도구를 사용하여 새 프로젝트 또는 기존 프로젝트 내에 Vue를 설치할 수 있습니다.
NPM에 대한 액세스와 함께 Node.js가 설치되어 있는지 확인해야합니다. 확인하려면 콘솔을 열고 다음을 입력하십시오.
> node -v
> npm -v이 두 명령 모두 버전 번호를 제공해야합니다. 인식되지 않으면 Nodejs.org를 방문하여 운영 체제에 맞는 적절한 설치 프로그램을 다운로드하십시오. 기본 옵션을 통해 설치하고 콘솔을 다시로드하십시오. 이제 동일한 명령을 다시 발행 할 수 있으며 작동 할 것입니다.
먼저 새 프로젝트 폴더를 만들어야합니다.
> mkdir vue-npm && cd vue-npmNPM으로 설치하는 것에 따라 프로젝트 종속성을 저장하려면 package.json 파일 을 만들어야 합니다.
이를 수행하려면 다음 명령을 실행하십시오.
> npm init -y그러면 새로운 package.json 파일 이 만들어 지고 프롬프트 의 기본값 -y 를 입력합니다 .
다음으로 npm을 사용하여 vue를 설치합니다.
> npm install vue --save이 시점 에서 <script .. src를 node_modules / vue / dist / vue.js로 변경하는 것을 제외하고는 위의 CDN 예제와 정확히 동일한 내용으로 index.html 파일을 만들 수 있습니다 .
그러나 일반적으로 Webpack 또는 Gulp와 같은 것을보다 견고한 개발 환경으로 사용합니다.
우리 프로젝트는 이런 방식으로 설정되지 않을 것이므로 Vue를 설치하는 데 실제 메서드로 Vue CLI 메서드를 사용할 것입니다.
Vue CLI로 Vue 설치
뷰 CLI (명령 줄 인터페이스) 새로운 뷰 프로젝트를 시작하는, 빠르고 쉽고 강력한 방법입니다.
먼저 Vue CLI를 설치해야합니다.
> npm install -g @vue/cli또한 Node가 최신인지 확인해야합니다. 그런데 : Varn 을 설치 하기 위해 Yarn 을 사용할 수도 있습니다 .
다음으로 새로운 Vue 프로젝트를 시작할 수 있습니다 :
> vue create vue-proj그러면 다음과 같은 프롬프트가 표시됩니다.
Vue CLI v3.0.0-alpha.8
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features일을 간단하게하기 위해 기본 옵션으로두고 Enter를 누르십시오.
- babel 은 JavaScript 컴파일러입니다.
- eslint 는 JavaScript linter입니다. Linting은 오류, 버그 등을 코딩하는 플래그입니다.
설치가 끝나면 디렉토리로 이동 한 다음 Vue 앱 을 제공 할 수 있습니다.
> cd vue-proj
> yarn serve그런 다음 프로젝트는 브라우저의 에서 액세스 할 수있게됩니다 !http : // localhost : 8080 /
'개발 > Vue.JS' 카테고리의 다른 글
| Vue Animation Tutorial - Vue의 애니메이션 시스템 사용법 배우기 (0) | 2018.03.11 |
|---|---|
| Vue 양식 자습서 - 사용자 입력 캡처 및 유효성 검사 (0) | 2018.03.11 |
| Vue CSS Tutorial - 클래스 및 스타일 바인딩 (0) | 2018.03.11 |
| Vue 템플릿 튜토리얼 - Interpolation 및 Directives (0) | 2018.03.11 |
| Vue 구성 요소 자습서 - Vue.js 응용 프로그램의 기본 구성 요소 (0) | 2018.03.11 |