개발환경 설정
node js 설치
- npm install -g npm (최신 버젼으로 업그레이드)
visual studio code 설치
- 플러그인설치
- View -> Extension 또는 CTRL + SHIFT + X
- view-in-browser : html 파일을 기본 브라우져로 볼 수 있도록 함
- vetur : vue.js 코드에 대한 문법 강조(Syntax highlighting), 코드 자동완성, 디버깅, 린팅 기능등을 제공
- HTML Snippets : HTML 태그 조각을 빠르게 작성할 수 있도록 도와줌
- JS-CSS-HTML Formatters : JS, CSS, HTML의 코드 자동완성 기능을 제공 (CTRL + SPACE)
- Vue 2 Snippets : Vue.js 2.0의 코드 조각 지원과 문법강조 기능을 제공
- Vue-beautify : Vue.js 코드에 대한 정리 배치 기능을 제공
- ESLint : 자바스크립트 코드 스타일, 문법 체크 기능 제공
크롬 브라우저 및 Vue devtools 설치
Vue-CLI 설치
- npm install -p yarn @vue/cli
Vue CLI 실행
- vue create [프로젝트폴더명]
- vue ui
- vue init webpack myapp : Vue CLI 2.X 버젼일 때는 webpack.browserify 와 같은 프로젝트 템플릿을 이용하여 다음과 같은 명령어를 이용해 스캐폴딩 코드를 생성한다.
첫번째 Vue.js 애플리케이션
- index.html 오른쪽 마우스 버튼 > View In Browser 실행
- 크롬에서 CTRL + SHIFT + I 로 개발자도구 실행
- console 에 model.message 실행
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>hello vue.js</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="simple">
<h2>{{ message }}</h2>
</div>
<script type="text/javascript">
var model = {
message: "첫 번째 Vue.js 앱입니다."
};
var simple = new Vue({
el: "#simple",
data: model
});
</script>
</body>
</html>
