Vue Js를 사용하기 위해서는 Node js를 설치 해야한다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
node -v위에 코드를 맥인 경우 터미널, 윈도우인 경우 터미널에 입력해서 node가 제대로 설치 되었는지 확인하자.
Vscode Vue install
- Vetur : VSCode에서 돌아가는 Vue 개발 툴입니다.
- vue : Vue 문법 검사기라고 생각하시면 됩니다.
- Vue VSCode Snippets : Vue 문법을 미리 알려주는 친구입니다.
첫번째 프로젝트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
message : 'Hello Vue.js!'
}
});
</script>
</body>
</html>
HTML파일을 생성하고 위와 같이 코드를 작성 하자
이후 Open In Default Brower를 눌러서 크롬에 접속하자.
(나는 기본 브라우저가 크롬이기에 크롬으로 들어가진다. 개발을 할때 크롬인것 추천한다.)
Vue를 더욱 잘 이용하긴 위해서는 크롬 개발자 도구에서 Vue.Js devtools를 설치 하자
설치 이후 개발자 도구에서 console를 확인하자.
이 로그를 통해 뷰 라이브러리가 정상적으로 로딩이 되었고, 현재 개발자 모드로 뷰가 실행되고 있다는 것을 파악 할 수 있다.
이후 [: → 도구 더보기 → 확장 프로그램]을 클릭
이후 위에 사진처럼 진행 하자.
위에 사진처럼 로그가 바뀌면 》를 누르고 Vue를 누르자.
