오늘은 Vue.JS를 시작하기 위한 기본 환경설정에 대해 포스팅 하려고 합니다.
본 포스팅을 Vue.js에 대한 공부 및 쉽고 간단하게 시작하기 위한 step by step 형태로
이어가도록 하겠습니다.
Vue.JS에 대해 차근차근 접근하기 위해 당분간은 아래 환경설정에서
설치한 npm 모듈을 사용하지 않고 html에서 vue lib를 사용하는 방식으로 진행하겠습니다.
Vue.JS를 사용하기 위해서는
Node.js
visual studio code
vue.js
vue.js devtools Chrome 확장 프로그램
을 설치하도록 하겠습니다.
1) Node.js를 설치
https://nodejs.org/ko/download/
다운로드 | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
2) visual studio code를 설치
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
3) vue.js devtools Chrome 확장 프로그램 설치
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related
Vue.js devtools
Browser DevTools extension for debugging Vue.js applications.
chrome.google.com
4) vue.js 설치
node.js를 설치하면 모듈을 관리할 수 있는 npm을 사용할 수 있습니다.
npm 명령어 통해 vue.js lib모듈을 설치할 수 있습니다.
# npm install vue
위 항목을 모두 설치 했다면, 프로그래밍 언어의 시작인 hello world를 출력해보도록 하겠습니다.
설치한 visual studio code를 실행하고 helloworld.html이라고 파일을 생성합니다.
일반 html 태그에 https://cdn.jsdelivr.net/npm/vue/dist/vue.js를 를 script로 import 하였습니다.
<!-- helloworld.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h1>helloWorld</h1>
</body>
</html>
아래 그림과 같이 마우스 우클릭 후 "Open with Live Server" 또는
키보드로 Alt +L + O를 입력하면 브라우저에서 웹서버가 동작합니다.
아래 브라우저와 같이 127.0.0.1:5500으로 html에서 입력한
helloWorld를 확인할 수 있습니다.
지금까지 Vue.JS step 1. 시작하기 - 환경설정에 대한 포스팅이였습니다.
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] step 3. 컴포넌트(component) (0) | 2022.05.03 |
|---|---|
| [Vue.JS] step 2. 인스턴스(instance) (0) | 2022.04.30 |
| [Vue.JS] error defined but never used no-unused-vars 해결방법 (0) | 2022.01.12 |
| [Vue.JS] $refs으로 Dom에 접근하는 방법 (0) | 2022.01.04 |
| [Vue.JS] Windows Terminal 실행 오류 "vue : 이 시스템에서 스크립트를 실행할 수 없으므로 ..."에 대한 해결 방법 (0) | 2022.01.02 |
