Node.js 는 JS 런타임 환경이며 Node.js 설치시 npm(Node Package Manager) 도 같이 설치된다.
npm 은 중앙저장소로 아주 거대한 오픈 소스 라이브러리 생태계이다.
LTS, Current 버전을 제공하며 LTS 는 Long Time Supported 로서 오랜기간 패치와 업데이트를 해주는 환경으로 안정적 환경을 위해서는 LTS 버전 설치가 좋다. LTS 버전은 짝수로 업데이트 된다.
Current Version 은 실험적인(도전적인) 버전으로 안정적이라고 보기에는 힘들다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Node.js 와 npm 설치여부를 확인하는 커맨드 명령은 간단하다.
Node.js 설치를 한 이유는 프론트엔드 서버 환경을 제공하기 위한 것이기 때문에 이후 건드릴 일은 거의 없다고 보면 된다.
Package Manager 를 통한 설치
Node.js 를 하나의 Package 로 볼 때 Window 는 PackageManager 인 Chocolatey 를 사용하여 다운로드 할 수 있다.
& choco install nodejs-lts
Node.js 버전 관리
개발 상황에 따라 프론트엔드 서버를 변경해야할 때가 있을 수 있다.
이때 사용되는 것이 NVM(Node Package Manager) 이다. 하지만 Node.js 를 삭제하고 진행해야한다.
Node.js 를 설치했다면 n 을 사용한다.
# npm 저장소에서 -g (전역적으로) 받아오는 것을 확인가능하다.
& npm install -g nVue.js 설치
npm를 제외 한 기본적 Vue.js 를 설치하는 방법을 알아본다.
kr.vuejs.org/v2/guide/installation.html
설치방법 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
<script>적용하는 방법
- 개발용 버전은 경고, 디버그가 포함된다.
- 배포용 버전은 경고가 제거 되며 배포시기에 교체해서 배포해야만한다.
받은 vue.js 파일을 프로젝트로 옮겨 script 태그에 앉히는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Test</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
new Vue({
//Element
el:'#app',
//data => Object
data:{
msg : 'Hello Vue'
}
})
</script>
</body>
</html>
NPM 설치 방법
- 거대한 App 작성시에는 NPM 설치가 권장된다.
# 최신 안정화 버전
$ npm install vue
CDN( Content Delivery Network )
- 분산된 서버에서 필요한 모듈을 가져오는 방법
- 다운로드를 하지 않아도 된다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
실행 확인
Web Editor 에 기본적으로 테스트 하는 방법
- 로컬 환경에서 Test 마다 계속 불필요한 파일을 만드는 방법은 좋지 않다.
- codepen.io/
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
- CodePen 사용시 JS 란에 설정 -> CDN 란에 vue 를 찾아 적용시키면 사용가능하다.
'Vue.js' 카테고리의 다른 글
| 1.Vue.js 기본 (0) | 2020.12.17 |
|---|---|
| 컴포넌트 구성 (0) | 2020.12.16 |
| 파비콘, 아이콘, 폰트, 반응형 태그 설정 (0) | 2020.12.16 |
| 싱글 파일 컴포넌트 구성. (0) | 2020.12.16 |
| Vue Cli 프로젝트 생성 (0) | 2020.12.16 |