1. [ Vue.js란 ? ]
Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.
: MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
2. [ Vue.js 설정하기 ]
<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
JavaScript
복사
또는
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
JavaScript
복사
<!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>Vue.js 애완용품샵</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<header>
<h1 v-text="sitename"></h1> <!--sitename속성에 대한 데이터 바인딩입니다.-->
<h2>{{sitename}}</h2>
</header>
</div>
<script>
var webStore = new Vue({
el:"#app",
data : {
//html에 있는 header에 추가된 sitename속성
sitename : 'Vue.js 애완용품샵'
}
});
</script>
</body>
</html>
JavaScript
복사
[ npm ]
Node.js 설치하면 npm 쓸 수 있음, npm은 각종 웹 개발 라이브러리 설치 도우미
npm으로 @vue/cli 설치함 → Vue프로젝트 빠르게 생성해주는 라이브러리
프로젝트 생성은 vue create 프로젝트명
[ vue파일이 어떻게 실행되나 ]
앱브라우저는 Vue파일 해석불가 그래서 App.vue 파일을 HTML로 컴파일하여 index.html으로 박아놓고있기때문에 동작한다.
[ node_modules ]
프로젝트에 쓰는 모든 라이브러리들이 저장되어있다.
[ src ]
소스코드 다 담는곳
[ public ]
html 파일, 기타파일 보관
[ package.json ]
라이브러리 버전, 프로젝트 설정기록
